1
0

6 Коммитууд 25bd23a82f ... c71dadcc4f

Эзэн SHA1 Мессеж Огноо
  wangcong c71dadcc4f perf(views): 优化设备工况卡片刷新时间的显示 1 долоо хоног өмнө
  wangshun 56b9bea542 perf(views): 初步编写"角色管理"页面功能权限功能 1 долоо хоног өмнө
  wangshun c27376f549 perf(views): 编写"组织管理"页面查询功能 1 долоо хоног өмнө
  wangshun f560bdadc7 perf(views): 编写"创建角色"步骤提交功能 1 долоо хоног өмнө
  wangshun e4a04dd58b perf(views): 优化"创建组织"步骤表单样式 1 долоо хоног өмнө
  wangshun 78df54dc4e chore(api): 添加用户管理模块相关接口 1 долоо хоног өмнө

+ 28 - 0
src/api/index.ts

@@ -89,6 +89,9 @@ import type {
   OperateLogQuery,
   Organization,
   OrganizationItem,
+  OrganizationListItem,
+  OrganizationListItemData,
+  OrganizationListParams,
   OutdooForm,
   PageParams,
   ParameterVerification,
@@ -115,6 +118,7 @@ import type {
   ProtocolStandardParamQuery,
   RegionQuery,
   RegionsPointsItem,
+  RolePermissions,
   SerialNumberItem,
   SerialNumberItemData,
   SmartCtrlLogData,
@@ -205,6 +209,14 @@ export const getFindRolesByOrgIds = async (params: number[]) => {
   return data;
 };
 
+// 角色信息表
+export const addRolePermissions = async (params: RolePermissions) => {
+  await request(apiSys('/sysRole/addRolePermissions'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
 // 角色信息表
 
 export const addCharacter = async (params: CharacterParams) => {
@@ -266,6 +278,22 @@ export const getSubOrgsByToken = async () => {
   return data;
 };
 
+export const getOrganizationList = async (params: OrganizationListParams) => {
+  const data = await request<OrganizationListItemData>(apiSys('/sysOrg/getPageList'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+  return data;
+};
+
+export const getOrganizationAllList = async (params?: string) => {
+  const data = await request<OrganizationListItem[]>(apiSys('/sysOrg/getList'), {
+    method: 'POST',
+    body: JSON.stringify({ orgName: params }),
+  });
+  return data;
+};
+
 // 用户信息表
 export const addAccount = async (params: AccountParams) => {
   await request(apiSys('/sysUser/add'), {

+ 42 - 0
src/types/index.ts

@@ -1075,6 +1075,7 @@ export interface DevWorkRealTimeData {
     time: string;
     [key: string]: string | number;
   }[];
+  flushTime: string | null;
 }
 
 export interface DevWorkHisDataQuery {
@@ -2586,3 +2587,44 @@ export interface DevicePermissionsParams {
   roleId: number;
   groupIds: number[];
 }
+export interface RolePermissions {
+  id?: number;
+  orgId: number;
+  roleName: string;
+  remark: string;
+  enabled: string;
+  permissionIds: number[];
+}
+
+export interface CharacterForm {
+  roleName: string;
+  remark: string;
+}
+
+export interface OrganizationListParams extends PageParams {
+  orgName: string;
+}
+
+export interface OperationPermissions {
+  value: number;
+  label: string;
+  list: number[];
+  subPermissions: { value: number; label: string }[];
+}
+
+export type OrganizationListItemData = PageData<OrganizationListItem>;
+
+export interface OrganizationListItem {
+  parentId: number;
+  parentOrgName: string;
+  orgName: string;
+  orderNum: number;
+  logo: string;
+  themeColor: string;
+  startTenancy: string;
+  endTenancy: string;
+  dataValidityPeriod: string;
+  degree: string;
+  remark: string;
+  enabled: string;
+}

+ 21 - 9
src/views/create-customer/CreateCharacter.vue

@@ -5,12 +5,12 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { getSubPermList } from '@/api';
+import { addRolePermissions, getSubPermList } from '@/api';
 
 import type { TreeProps } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import type { DataNode } from 'ant-design-vue/es/tree';
-import type { CharacterItem, TreeStructure } from '@/types';
+import type { CharacterForm, CharacterItem, CreateCustomer, TreeStructure, UseGuideStepItemProps } from '@/types';
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
@@ -27,19 +27,31 @@ const characterIndex = ref<number>(0);
 const expandedKeys = ref<number[]>([]);
 const selectedKeys = ref<number[]>([]);
 const checkedKeys = ref<number[]>([]);
+
 const fieldNames: TreeProps['fieldNames'] = {
   children: 'subPermissions',
   title: 'menuName',
   key: 'id',
 };
+const props = defineProps<UseGuideStepItemProps<CreateCustomer>>();
 const treeStructure = ref<DataNode[]>([]);
-const characterForm = ref({
-  name: '',
+const characterForm = ref<CharacterForm>({
+  roleName: '',
+  remark: '',
 });
 const addCharacter = () => {
   characterOpen.value = true;
 };
 const characterSave = () => {
+  handleRequest(async () => {
+    await addRolePermissions({
+      ...characterForm.value,
+      orgId: props.form.id as number,
+      enabled: '1',
+      permissionIds: checkedKeys.value,
+    });
+  });
+
   characterList.value.push({
     name: '',
     id: undefined,
@@ -108,8 +120,8 @@ const transformTreeData = (data: TreeStructure[]): DataNode[] => {
 onMounted(() => {
   handleRequest(async () => {
     const data = await getSubPermList(0);
-    const treeData = transformTreeData(data);
-    treeStructure.value = treeData[0].subPermissions;
+    treeStructure.value = transformTreeData(data[0].subPermissions[0].subPermissions);
+    // treeStructure.value = treeData[0].subPermissions;
     checkedAll.value = getAllKeys(treeStructure.value);
   });
 });
@@ -156,13 +168,13 @@ onMounted(() => {
         :rules="rules"
         :label-col="{ span: 3 }"
       >
-        <AFormItem label="角色名称" name="name">
-          <AInput class="input-width" v-model:value="characterForm.name" placeholder="请输入角色名称" />
+        <AFormItem label="角色名称" name="roleName">
+          <AInput class="input-width" v-model:value="characterForm.roleName" placeholder="请输入角色名称" />
         </AFormItem>
         <AFormItem label="角色描述">
           <ATextarea
             class="input-width"
-            v-model:value="characterForm.name"
+            v-model:value="characterForm.remark"
             :placeholder="t('common.pleaseEnter')"
             :auto-size="{ minRows: 4 }"
           />

+ 1 - 1
src/views/create-customer/EstablishOrganization.vue

@@ -354,7 +354,7 @@ onMounted(() => {
 <style lang="scss">
 .organization {
   .ant-form-item .ant-form-item-label {
-    width: 140px;
+    width: 130px;
   }
 }
 </style>

+ 7 - 6
src/views/device-work-status/DeviceWorkStatus.vue

@@ -87,6 +87,7 @@ type DeviceRTDMap = Record<
   {
     [key: string]: number | string | undefined;
     time?: string;
+    flushTime?: string;
   }
 >;
 
@@ -174,19 +175,19 @@ const getRealTimeData = () => {
       endTime: devRTDUpdateTime.value,
     });
 
-    const isDeviceChillerUnit = activeDeviceType.value === DeviceType.冷水主机;
-
     data.forEach((item) => {
-      const { deviceId, deviceParamMapList, ...chillerUnitExtraParams } = item;
+      const { deviceId, deviceParamMapList, ...extraParams } = item;
       deviceRealTimeData.value[deviceId] = {};
 
       deviceParamMapList.forEach((paramItem) => {
         Object.assign(deviceRealTimeData.value[deviceId], paramItem);
       });
 
-      if (isDeviceChillerUnit) {
-        Object.assign(deviceRealTimeData.value[deviceId], chillerUnitExtraParams);
+      if (extraParams.flushTime === 'null') {
+        extraParams.flushTime = null;
       }
+
+      Object.assign(deviceRealTimeData.value[deviceId], extraParams);
     });
   });
 
@@ -299,7 +300,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
                 </div>
                 <!-- <div class="device-cop-level">中</div> -->
               </template>
-              <span class="device-card-header-time">{{ devRTDUpdateTime }}</span>
+              <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.flushTime }}</span>
               <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam(item.id, $event)" />
             </div>
             <component

+ 84 - 32
src/views/organization-manage/OrganizationManage.vue

@@ -1,18 +1,27 @@
 <script setup lang="ts">
-import { computed, reactive, ref, useTemplateRef } from 'vue';
+import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue';
 import dayjs from 'dayjs';
 
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
+import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
+import { getOrganizationAllList } from '@/api';
 
 import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
 
 import type { FormInstance } from 'ant-design-vue';
-import type { CreateCustomer, FormRules, RegisterGatewayForm } from '@/types';
+import type { CreateCustomer, FormRules, OrganizationListItem, RegisterGatewayForm } from '@/types';
 
 const organizationOpen = ref<boolean>(false);
 const establishOrganizationRef = useTemplateRef('establishOrganization');
 const organizationRefs = ref<FormInstance>();
-
+const organizationList = ref<OrganizationListItem[]>([]);
+const orgName = ref<string>('');
+const organizationId = ref<number>();
+const organizationTitle = ref<boolean>(true);
+const { handleRequest } = useRequest();
+const modalComponentRef = useTemplateRef('modalComponent');
 const useForm = reactive<CreateCustomer>({
   orgName: '',
   logo: '',
@@ -24,37 +33,36 @@ const useForm = reactive<CreateCustomer>({
   stationsNumber: 0,
   dataValidityPeriod: '',
 });
-const organizationList = ref([
-  {
-    deviceName: '客户B',
-    deviceName1: '方案商A',
-    deviceName2: '-',
-    deviceName3: '2024-12-31 23:12:00',
-  },
-]);
+
 const organizationColumns = [
   {
     title: '组织名称',
-    dataIndex: 'deviceName',
-    key: 'deviceName',
+    dataIndex: 'orgName',
+    key: 'orgName',
     ellipsis: true,
   },
   {
     title: '上级组织',
-    dataIndex: 'deviceName1',
-    key: 'deviceName1',
+    dataIndex: 'parentOrgName',
+    key: 'parentOrgName',
     ellipsis: true,
   },
   {
     title: '组织描述',
-    dataIndex: 'deviceName2',
-    key: 'deviceName2',
+    dataIndex: 'remark',
+    key: 'remark',
+    ellipsis: true,
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'startTenancy',
+    key: 'startTenancy',
     ellipsis: true,
   },
   {
-    title: '创建时间',
-    dataIndex: 'deviceName3',
-    key: 'deviceName3',
+    title: '到期日期',
+    dataIndex: 'endTenancy',
+    key: 'endTenancy',
     ellipsis: true,
   },
   {
@@ -98,17 +106,28 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
 });
 const addOrganization = () => {
   organizationOpen.value = true;
+  organizationTitle.value = true;
+};
+const addQuery = () => {
+  getOrganizationAll();
+};
+const addReset = () => {
+  orgName.value = '';
+  getOrganizationAll();
 };
-const addQuery = () => {};
-const addReset = () => {};
 const organizationEditor = (id: number) => {
+  organizationOpen.value = true;
+  organizationTitle.value = false;
   console.log(id);
 };
 const organizationDelete = (id: number) => {
+  organizationId.value = id;
+  modalComponentRef.value?.showView();
   console.log(id);
 };
 const clickOrganizationChange = (id: number) => {
   console.log(id);
+  getOrganizationAll();
 };
 const cancelOrganization = () => {
   organizationOpen.value = false;
@@ -118,11 +137,29 @@ const saveOrganization = async () => {
     await Promise.all([organizationRefs.value?.validate() || Promise.resolve()]);
     await establishOrganizationRef.value?.finish?.();
     organizationOpen.value = false;
+    getOrganizationAll();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (err) {
     /* empty */
   }
 };
+const getOrganizationAll = () => {
+  handleRequest(async () => {
+    organizationList.value = await getOrganizationAllList(orgName.value);
+  });
+};
+
+const confirm = () => {
+  handleRequest(async () => {
+    if (organizationId.value) {
+      modalComponentRef.value?.hideView();
+    }
+  });
+};
+
+onMounted(() => {
+  getOrganizationAll();
+});
 </script>
 
 <template>
@@ -145,27 +182,29 @@ const saveOrganization = async () => {
         <AFlex justify="space-between" class="div-bottom">
           <AFlex align="center">
             <div class="organization-content-text">搜索</div>
-            <AInput class="input-width" placeholder="请输入报警内容、设备" />
+            <AInput v-model:value="orgName" class="input-width" placeholder="请输入组织名称" />
           </AFlex>
           <div>
             <AButton type="primary" @click="addQuery"> 查询 </AButton>
             <AButton class="button-left" type="primary" ghost @click="addReset"> 重置 </AButton>
           </div>
         </AFlex>
-        <ATable :columns="organizationColumns" :data-source="organizationList" :pagination="false">
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'action'">
-              <SvgIcon @click="organizationEditor(record.id)" class="icon-style" name="edit-o" />
-              <SvgIcon @click="organizationDelete(record.id)" class="icon-style" name="delete" />
+        <div class="organization-table">
+          <ATable :columns="organizationColumns" :data-source="organizationList" :pagination="false">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <SvgIcon @click="organizationEditor(record.id)" class="icon-style" name="edit-o" />
+                <SvgIcon @click="organizationDelete(record.id)" class="icon-style" name="delete" />
+              </template>
             </template>
-          </template>
-        </ATable>
+          </ATable>
+        </div>
       </div>
     </AFlex>
     <AModal
       class="organization-modal"
       v-model:open="organizationOpen"
-      title="添加"
+      :title="organizationTitle ? '添加' : '编辑'"
       width="920px"
       :mask-closable="false"
       :footer="null"
@@ -186,10 +225,24 @@ const saveOrganization = async () => {
         <AButton type="primary" class="dev-left" @click="saveOrganization">保存</AButton>
       </AFlex>
     </AModal>
+
+    <ConfirmModal
+      ref="modalComponent"
+      :title="t('common.deleteConfirmation')"
+      :description-text="t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.organization-table {
+  height: calc(100vh - 194px);
+  overflow: auto;
+}
+
 .footer {
   margin-top: 24px;
 }
@@ -231,7 +284,6 @@ const saveOrganization = async () => {
   width: 100%;
   height: calc(100vh - 80px);
   padding: 24px;
-  margin-bottom: 16px;
   background: #fff;
   border-radius: 16px;
 }

+ 119 - 36
src/views/role-manage/RoleManage.vue

@@ -14,11 +14,14 @@ import {
   getAllGroupList,
   getFindRolesByOrgIds,
   getSubOrgsByToken,
+  getSubPermList,
   updateCharacter,
 } from '@/api';
 
 import type { DataNode, TreeProps } from 'ant-design-vue/es/tree';
-import type { PermissionGroupItem } from '@/types';
+import type { Key } from 'ant-design-vue/es/vc-tree/interface';
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
+import type { OperationPermissions, TreeStructure } from '@/types';
 
 interface HaracterItem {
   name: string;
@@ -34,15 +37,28 @@ const permissions = ref<string>('dataPermissions');
 const equipmentChecked = ref<boolean>(false);
 const editorChecked = ref<boolean>(true);
 // const valueTime = ref<string>('1');
-const devicePermissionsSelectedKeys = ref<number[]>([]);
+const operationpermissions = ref<OperationPermissions[]>([]);
 const devicePermissionsExpandedKeys = ref<number[]>([]);
-const devicePermissionsCheckedKeys = ref<number[]>([]);
+const checkedFatherKeys = ref<number[]>([]);
+
+const devicePermissionsCheckedKeys = ref({
+  checked: [] as number[], // 完全选中的节点
+  halfChecked: [] as number[], // 半选中的节点(在严格模式下通常为空)
+});
 const allKeys = ref<number[]>([]);
 const indeterminate = ref<boolean>(false);
 const orgId = ref<number>();
 const characterId = ref<number>();
 const enterShow = ref<boolean>(false);
 const modalComponentRef = useTemplateRef('modalComponent');
+const expandedKeys = ref<number[]>([]);
+const checkedKeys = ref<number[]>([]);
+const treeStructure = ref<DataNode[]>([]);
+const fieldNamesCheck: TreeProps['fieldNames'] = {
+  children: 'subPermissions',
+  title: 'menuName',
+  key: 'id',
+};
 const pagePermissionsTree = ref<DataNode[]>([]);
 const fieldNames: TreeProps['fieldNames'] = {
   children: 'deviceGroupChilds',
@@ -67,8 +83,9 @@ const clickCharacter = (id: number) => {
   if (characterList.value.some((item) => !isValidString(item.name))) {
     return;
   }
-
   characterListId.value = id;
+  getDeviceGroupList();
+  getFunctionPermList();
 };
 const addEditor = async (index: number) => {
   if (characterList.value.some((item) => !isValidString(item.name))) {
@@ -146,23 +163,30 @@ const cancelPermission = () => {
   editorChecked.value = true;
 };
 
-const addTree = () => {
-  console.log(devicePermissionsSelectedKeys.value);
+const addTree = (checked: Key[] | { checked: Key[]; halfChecked: Key[] }, info: CheckInfo) => {
+  if (info.node.parent) {
+    checkedFatherKeys.value.push(info.node.parent.node.id);
+  }
 };
+
 const savePermission = () => {
   if (permissions.value === 'dataPermissions') {
     handleRequest(async () => {
       await addDevicePermissions({
         roleId: characterListId.value,
-        groupIds: devicePermissionsCheckedKeys.value,
+        groupIds: devicePermissionsCheckedKeys.value.checked,
       });
       getDeviceGroupList();
     });
+  } else {
+    console.log(operationpermissions.value);
+    console.log(checkedFatherKeys.value);
+    console.log(checkedKeys.value);
+    console.log([...new Set([...checkedKeys.value, ...checkedFatherKeys.value])]);
   }
   editorChecked.value = true;
 };
 const clickOrganizationChange = (id: number) => {
-  console.log(id);
   orgId.value = id;
   getFindRolesByOrg(id);
 };
@@ -197,7 +221,7 @@ const getDeviceGroupList = () => {
       roleId: characterListId.value,
     });
     devicePermissionsExpandedKeys.value = [];
-    devicePermissionsCheckedKeys.value = [];
+    devicePermissionsCheckedKeys.value.checked = [];
     allKeys.value = [];
     list.forEach((item) => {
       item.key = item.id;
@@ -210,34 +234,64 @@ const getDeviceGroupList = () => {
         });
       }
     });
-    devicePermissionsCheckedKeys.value = getAllKeys(data);
+
+    data.forEach((item) => {
+      devicePermissionsCheckedKeys.value.checked.push(item.id);
+      item.deviceGroupChilds.forEach((i) => {
+        devicePermissionsCheckedKeys.value.checked.push(i.id);
+      });
+    });
+
     pagePermissionsTree.value = list as DataNode[];
   });
 };
+const transformTreeData = (data: TreeStructure[]): DataNode[] => {
+  return data.map((item) => ({
+    ...item,
+    key: item.id, // 关键:将 id 映射到 key
+    title: item.menuName,
+    children: item.subPermissions ? transformTreeData(item.subPermissions) : undefined,
+  }));
+};
+
+const transformData = (data: TreeStructure[]): OperationPermissions[] => {
+  return data.map((item) => {
+    // 转换当前层级的属性
+    const transformed = {
+      value: item.id,
+      label: item.menuName,
+      list: [],
+      // 保留其他属性(如果需要)
+      ...(item.subPermissions && {
+        subPermissions: transformData(item.subPermissions),
+      }),
+    };
+
+    return transformed;
+  });
+};
+
+const getFunctionPermList = () => {
+  handleRequest(async () => {
+    const data = await getSubPermList(0);
+    if (data.length) {
+      treeStructure.value = transformTreeData(data[0].subPermissions[0].subPermissions);
+      operationpermissions.value = transformData(data[0].subPermissions[1].subPermissions);
+      console.log(operationpermissions.value);
+      checkedKeys.value = [10601, 10602, 10901, 107, 102, 103, 106, 109];
+    }
+  });
+};
 
 const selectAll = () => {
   indeterminate.value = false;
   if (equipmentChecked.value) {
-    devicePermissionsCheckedKeys.value = allKeys.value;
+    devicePermissionsCheckedKeys.value.checked = allKeys.value;
   } else {
-    devicePermissionsCheckedKeys.value = [];
+    devicePermissionsCheckedKeys.value.checked = [];
   }
 };
 
-// 获取所有节点 key方法
-const getAllKeys = (data: PermissionGroupItem[]) => {
-  const keys: number[] = [];
-  data.forEach((item) => {
-    keys.push(item.id);
-    if (item.deviceGroupChilds.length) {
-      item.deviceGroupChilds.forEach((i) => {
-        keys.push(i.id);
-      });
-    }
-  });
-  return keys;
-};
-
 const addRadioGroup = () => {
   if (permissions.value === 'functionPermissions') {
     getDeviceGroupList();
@@ -246,7 +300,7 @@ const addRadioGroup = () => {
 };
 
 watch(
-  () => devicePermissionsCheckedKeys.value,
+  () => devicePermissionsCheckedKeys.value.checked,
   (count) => {
     if (count) {
       indeterminate.value = !!count.length && count.length < allKeys.value.length;
@@ -258,6 +312,7 @@ watch(
 onMounted(() => {
   handleRequest(async () => {
     await getSubOrgsByToken();
+    getFunctionPermList();
   });
 });
 </script>
@@ -354,7 +409,7 @@ onMounted(() => {
               default-expand-all
               :field-names="fieldNames"
               :disabled="editorChecked"
-              @check="addTree"
+              :check-strictly="true"
             />
           </div>
 
@@ -374,17 +429,28 @@ onMounted(() => {
           <AFlex align="center" class="device-permissions">
             <div>查看权限</div>
           </AFlex>
-          <!-- <ATree
-            v-model:selected-keys="pagePermissionsSelectedKeys"
-            :tree-data="pagePermissionsTree"
-            checkable
-            default-expand-all
-            class="tree-permissions"
-            :disabled="editorChecked"
-          /> -->
+          <div class="check-div">
+            <ATree
+              v-model:expanded-keys="expandedKeys"
+              v-model:checked-keys="checkedKeys"
+              :tree-data="treeStructure"
+              checkable
+              :field-names="fieldNamesCheck"
+              :disabled="editorChecked"
+              class="tree-permissions"
+              default-expand-all
+              @check="addTree"
+            />
+          </div>
+
           <AFlex align="center" class="device-permissions div-top">
             <div>操作权限</div>
           </AFlex>
+          <div class="operation">
+            <AFlex align="center" v-for="(item, index) in operationpermissions" :key="index" class="operation-div">
+              <ACheckboxGroup v-model:value="item.list" :options="item.subPermissions" :disabled="editorChecked" />
+            </AFlex>
+          </div>
         </div>
       </div>
     </AFlex>
@@ -400,6 +466,23 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.operation {
+  height: 200px;
+  overflow: auto;
+}
+
+.operation-div {
+  width: 100%;
+  height: 48px;
+  padding-left: 52px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.check-div {
+  height: calc(100vh - 494px);
+  overflow: auto;
+}
+
 .permission-div {
   height: calc(100vh - 244px);
   overflow: auto;