前端页面完成

static/license_info/license_info.css

@@ -147,8 +147,8 @@ header h1 {
         transform: scale(0.95); /* 轻微缩放效果 */
     }
     to {
-        opacity: 1;
-        transform: scale(1);
+        opacity: 0;
+        transform: scale(0.95); /* 轻微缩放效果 */
     }
 }
 
@@ -265,7 +265,7 @@ main {
     overflow: hidden;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 过渡效果 */
     margin-bottom: 20px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* iOS 系统字体 */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 字体 */
     padding-bottom: 20px; /* 添加底部填充，以防止内容溢出 */
 }
 
@@ -277,7 +277,7 @@ main {
 
 /* 卡片顶部蓝色区域 */
 .license-info-card-header {
-    background-color: #007aff; /* iOS风格的蓝色 */
+    background-color: #007aff; /* 蓝色 */
     height: 50px; /* 顶部蓝色部分的高度 */
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
@@ -307,21 +307,21 @@ main {
 .card-text {
     margin: 10px 0; /* 增加字段之间的间距 */
     font-size: 18px; /* 提高字体大小 */
-    color: #3a3a3c; /* 中灰色，符合iOS风格 */
+    color: #3a3a3c; /* 中灰色， */
     line-height: 1.6; /* 行间距调整，确保更好的可读性 */
 }
 
 /* 许可证状态的颜色 */
 .license-status-green {
-    color: #34c759; /* iOS的绿色 */
+    color: #34c759; /* 绿色 */
 }
 
 .license-status-yellow {
-    color: #ffcc00; /* iOS的黄色 */
+    color: #ffcc00; /* 黄色 */
 }
 
 .license-status-red {
-    color: #ff3b30; /* iOS的红色 */
+    color: #ff3b30; /* 红色 */
 }
 
 
@@ -384,7 +384,7 @@ main {
 .license-info-modal-content.show {
     opacity: 1; /* 动画显示模态框 */
     width: 80vw; /* 宽度占据视口80% */
-    height: 70vh; /* 高度占据视口70% */
+    height: 90vh; /* 高度占据视口70% */
     top: 50%; /* 垂直居中 */
     left: 50%; /* 水平居中 */
     transform: translate(-50%, -50%) scale(1); /* 完全居中，且带有缩放效果 */
@@ -414,7 +414,7 @@ main {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
-/* 标题的 iOS 风格 */
+/* 标题的  风格 */
 .license-info-modal-header h2 {
     font-size: 24px;
     font-weight: 600;
@@ -436,8 +436,8 @@ main {
     border-radius: 8px; /* 设置圆角 */
     padding: 15px; /* 内部填充 */
     margin-bottom: 15px; /* 组之间的间隔 */
-    background-color: #f9f9f9; /* 设置浅灰色背景 */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 设置轻微的阴影 */
+    background-color: #ffffff; /* 设置白色背景 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* 设置轻微的阴影 */
 }
 
 .license-info-group-box p {
@@ -483,6 +483,7 @@ main {
     color: #3a3a3c; /* 字体颜色为深灰色 */
     font-size: 18px;
     line-height: 1.6; /* 行高 */
+
 }
 
 /* 添加滚动条样式，符合iOS的滑动效果 */
@@ -555,6 +556,14 @@ main {
     color: white; /* 当前选中的选项字体颜色为白色 */
 }
 
+
+.license-info-modal-project-info {
+    border: 1px solid #ccc; /* 设置边框样式 */
+    padding: 5px; /* 设置内边距 */
+    border-radius: 5px; /* 设置圆角 */
+    background-color: #f9f9f9; /* 设置背景颜色 */
+}
+
 /* 侧边栏的菜单项与搜索框保持间距 */
 nav ul {
     padding-top: 20px;

static/license_info/license_info.html

@@ -152,8 +152,8 @@
     <div class="distributionHistory-modal-content">
         <span class="distributionHistory-modal-close">&times;</span> <!-- 修改了关闭按钮的类名 -->
         <h2>分发历史</h2>
-        <div id="distributionHistory-user-content"></div> <!-- 修改了用户分发记录的 ID -->
-        <div id="distributionHistory-email-content"></div> <!-- 修改了邮箱分发记录的 ID -->
+        <div id="distributionHistory-user-content"  class="distributionHistory-user-content" ></div> <!-- 修改了用户分发记录的 ID -->
+        <div id="distributionHistory-email-content"  class="distributionHistory-email-content" ></div> <!-- 修改了邮箱分发记录的 ID -->
     </div>
 </div>
 

static/license_info/license_info.js

@@ -243,7 +243,7 @@ licenseInfoLink.addEventListener('click', function(event) {
             <!-- 确定按钮 -->
             <button id="submit-button">确定</button>
         </div>
-            <div class="license-info-container" id="license-info-restaurant-list">   </div>
+            <div class="license-info-container" style="display: none;" id="license-info-restaurant-list">   </div>
     `; // 这是原来的 License 信息区域 HTML
 
     //mainContainer.innerHTML = licenseInfoHtml;
@@ -348,26 +348,34 @@ function renderLicenseCards(data, clearContainer = false) {
             statusClass = 'license-status-red';
         }
 
+        /*筛选名字*/
+        let creatorUser = firstItem.Creator;
+        if (creatorUser.includes('-')) {
+            let firstDashIndex = creatorUser.indexOf('-');
+            let secondDashIndex = creatorUser.indexOf('-', firstDashIndex + 1);
+            creatorUser = creatorUser.substring(firstDashIndex + 1, secondDashIndex);
+}
         const card = document.createElement('div');
         card.className = 'license-info-card';
            // 给卡片添加一个唯一标识符的 data 属性
         card.setAttribute('data-oa-request-id', firstItem.oa_request_id);
 
         // 在卡片的第一行显示申请时间
+          //<p class="card-text">oa_request_id：${firstItem.oa_request_id}</p>
         card.innerHTML = `
             <div class="license-info-card-header">
                 <h3 class="card-title">${firstItem.GlxmName}</h3>
             </div>
             <div class="license-info-card-content">
-                <p class="card-text">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
-                <p class="card-text">创建者：${firstItem.Creator}</p>
+                <p class="card-text date-time">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
+                <p class="card-text">创建者：${creatorUser}</p>
                 <p class="card-text">公司：${firstItem.Company}</p>
                 <p class="card-text">集群：${childRowCount} 套  共计：${firstItem.TotalNodes} 节点</p>
                 <p class="card-text license-status ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
-                <p class="card-text">oa_request_id：${firstItem.oa_request_id}</p>
+                
             </div>
         `;
-
+  
 
      // 给卡片添加点击事件，点击后显示模态框
      card.addEventListener('click', () => {
@@ -567,7 +575,20 @@ async function fetchPermissionsByRole(role) {
         const data = await response.json();
         currentUserPermissions = data.data.Permissions; // 获取用户的权限数组
         console.log('currentUserPermissions:', currentUserPermissions);
-        
+         // 检查用户是否有读取许可证的权限
+         const hasReadLicensePermission = currentUserPermissions.includes("read_license");
+         const hasReadUserPermission = currentUserPermissions.includes("read_user");
+         const hasReadRolePermission = currentUserPermissions.includes("get_role");
+         if (hasReadUserPermission){
+             // 如果有读取许可证的权限，则触发用户管理按钮的点击事件
+             document.getElementById('user-management-link').click();
+         }else if (hasReadRolePermission) {// 根据权限触发相应的按钮点击事件
+             // 如果没有读取许可证的权限，则触发角色管理按钮的点击事件
+             document.getElementById('role-management-link').click();
+         } else if (hasReadLicensePermission) {
+            document.getElementById('license-info-link').click();
+         }
+
         // 定义权限类别
         // const licensePermissions = ['upload_license', 'read_license'];
         // const userPermissionsCheck = ['create_user', 'read_user', 'update_user', 'delete_user'];

static/license_info/license_info_distribution.css

@@ -1,3 +1,12 @@
+/*公共*/
+.date-time {
+    color: #808080; /* 浅灰色 */
+    font-size: 1.2em; /* 放大字体 */
+    font-weight: bold; /* 加粗字体 */
+}
+
+
+/*---------------------------------------------------------*/
 /* 分发模态框基础样式 */
 .DistributeModal {
     display: none; /* 初始隐藏 */
@@ -208,6 +217,7 @@
 
 /*分发历史模态框----------*/
 /* 模态框背景 */
+/* 模态框背景 */
 .distributionHistory-modal {
     display: none; /* 默认隐藏 */
     position: fixed;
@@ -231,6 +241,8 @@
     width: 90%;
     max-width: 500px;
     padding: 20px; /* 内边距 */
+
+    border: 4px solid #02556e; 
 }
 
 /* 关闭按钮 */
@@ -255,26 +267,28 @@
 .distributionHistory-email-content {
     margin-top: 15px; /* 上外边距 */
     margin-bottom: 15px; /* 下外边距 */
-    border: 5px solid #02556e; /* 边框 */
+    border: 1px solid #02556e; /* 边框 */
     border-radius: 8px; /* 圆角 */
     padding: 10px; /* 内边距 */
-    background-color: #f9f9f9; /* 背景色 */
-}
-/* 用户记录 */
-.distributionHistoryModal-user {
-    padding: 10px;
-    border-bottom: 1px solid #eaeaea;
+    background-color: #ffffff; /* 背景色 */
+
 }
 
-/* 邮箱记录 */
-.distributionHistoryModal-email {
+/* 记录内容样式 */
+.distributionHistoryModal-record {
     padding: 10px;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid #eee9e9;
 }
 
+/* 最后一个记录没有底部边框 */
+/* .distributionHistoryModal-record:last-child {
+    border-bottom: none;
+} */
+
 /* 无记录提示 */
 .distributionHistoryModal-no-record {
     text-align: center;
     color: #999;
     padding: 10px;
 }
+

static/license_info/license_info_distribution.js

@@ -486,26 +486,61 @@ function showDistributionHistory(selectedRowData) {
         const userRecords = data.data.license_record_to_user || [];
         const emailRecords = data.data.license_record_to_emails || [];
 
+        // 按时间排序，最新的记录在前
+        userRecords.sort((a, b) => new Date(b.up_time) - new Date(a.up_time));
+        emailRecords.sort((a, b) => new Date(b.up_time) - new Date(a.up_time));
+
+        // 分组函数
+        function groupBy(records, key) {
+            return records.reduce((result, record) => {
+                const date = new Date(record.up_time).toLocaleDateString();
+                if (!result[date]) {
+                    result[date] = [];
+                }
+                result[date].push(record);
+                return result;
+            }, {});
+        }
+
+        // 分组用户记录和邮箱记录
+        const groupedUserRecords = groupBy(userRecords, 'up_time');
+        const groupedEmailRecords = groupBy(emailRecords, 'up_time');
+
         // 动态生成用户记录的 HTML
-        const userContent = userRecords.length > 0 ? 
-            userRecords.map(user => `
-                <div class="distributionHistory-user">
-                    <div>用户名: ${user.user_account}</div>
-                    <div>唯一用户 ID: ${user.user_unique_id}</div>
-                    <div>更新时间: ${new Date(user.up_time).toLocaleString()}</div>
-                </div>
-            `).join('') : 
-            '<div class="distributionHistory-no-record">无用户记录</div>';
-        
+        const userContent = Object.keys(groupedUserRecords).length > 0 ? 
+            Object.keys(groupedUserRecords).map(date => {
+                const records = groupedUserRecords[date];
+                const recordContent = records.map(user => `
+                    <div class="distributionHistoryModal-record">
+                        <div>用户名: ${user.user_account}</div>
+                    </div>
+                `).join('');
+                return `
+                    <div class="distributionHistoryModal-group">
+                        <div class="distributionHistoryModal-group-title">${date}</div>
+                        ${recordContent}
+                    </div>
+                `;
+            }).join('') : 
+            '<div class="distributionHistoryModal-no-record">没有用户分发记录</div>';
+
         // 动态生成邮箱记录的 HTML
-        const emailContent = emailRecords.length > 0 ? 
-            emailRecords.map(email => `
-                <div class="distributionHistory-email">
-                    <div>邮箱: ${email.emails}</div>
-                    <div>更新时间: ${new Date(email.up_time).toLocaleString()}</div>
-                </div>
-            `).join('') : 
-            '<div class="distributionHistory-no-record">无邮箱记录</div>';
+        const emailContent = Object.keys(groupedEmailRecords).length > 0 ? 
+            Object.keys(groupedEmailRecords).map(date => {
+                const records = groupedEmailRecords[date];
+                const recordContent = records.map(email => `
+                    <div class="distributionHistoryModal-record">
+                        <div>邮箱: ${email.emails}</div>
+                    </div>
+                `).join('');
+                return `
+                    <div class="distributionHistoryModal-group">
+                        <div class="distributionHistoryModal-group-title">${date}</div>
+                        ${recordContent}
+                    </div>
+                `;
+            }).join('') : 
+            '<div class="distributionHistoryModal-no-record">没有邮箱分发记录</div>';
 
         // 将内容插入到模态框中的对应 div
         document.getElementById('distributionHistory-user-content').innerHTML = userContent;
@@ -534,6 +569,7 @@ function showDistributionHistory(selectedRowData) {
 }
 
 
+
 function formatDateTime(dateString) {
     const date = new Date(dateString);
 

static/license_info/license_info_modal.js

@@ -61,17 +61,26 @@ function initializeHeaderContent(firstItem,sortedItem) {
    const hasDispatchPermission = currentUserPermissions.includes('dispat_license');
 
 console.log(`当前用户是否有生成权限: ${hasGeneratePermission}, ${hasDispatchPermission}`);
+
+/*筛选名字*/
+let creatorUser = firstItem.Creator;
+if (creatorUser.includes('-')) {
+    let firstDashIndex = creatorUser.indexOf('-');
+    let secondDashIndex = creatorUser.indexOf('-', firstDashIndex + 1);
+    creatorUser = creatorUser.substring(firstDashIndex + 1, secondDashIndex);
+}
+    console.log("筛选名字",creatorUser)
+
     // 设置卡片内容
-// 修改后的卡片内容部分代码
 modalHeader.innerHTML = `
     <div class="license-info-card-header">
         <h3 class="card-title">${firstItem.GlxmName}</h3>
     </div>
     <div class="license-info-card-content">
-        <p class="card-text">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
+        <p class="card-text date-time">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
         <p class="card-text">公司：${firstItem.Company}</p>
-        <p class="card-text">项目信息：${firstItem.Project}</p>
-        <p class="card-text">创建者：${firstItem.Creator}</p>
+        <p class="card-text">项目信息：<div class="project-info">${firstItem.Project}</div></p>
+        <p class="card-text">创建者：${creatorUser}</p>
         <p class="card-text license-status ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
         <div class="license-info-card-buttons">
             ${
@@ -190,9 +199,12 @@ modalHeader.innerHTML = `
                     <p><strong>数据库版本: </strong> ${group.ProductName}${group.ProductVersion}</p>
                     <p><strong>CPU 型号:</strong> ${group.oa_cpu}</p>
                     <p><strong>操作系统环境:</strong> ${group.oa_operating_system}</p>
-                    <p><strong>以下为测试显示:</strong> </p>
-                    <p><strong>oa_id:</strong> ${group.oa_id}</p>
-                    <p><strong>oa_request_id:</strong> ${group.oa_request_id}</p>
+                    <p><strong>主IP/MAC地址:</strong> 
+                        ${group.oa_main_mac ? group.oa_main_mac : '未填写'}
+                    </p>
+                    <p><strong>副IP/MAC地址:</strong> 
+                        ${group.oa_second_mac ? group.oa_second_mac : '未填写'}
+                    </p>
                 `;
 
                 // 将生成的组内容加入到 modalBody

static/role/role.js

@@ -109,6 +109,9 @@ function renderRole(container, roleInfo, permissionMap, isTopRole) {
     });
 }
 
+
+
+
 function showRoleActionMenu(event, roleName,roleInfo) {
     // 移除已有的菜单
     const existingMenu = document.getElementById('role-action-menu');

static/user/user.js

@@ -72,6 +72,14 @@ function fetchUsers() {
             cardsContainer.appendChild(card);
         });
     });
+    // 检查用户是否有创建用户的权限
+    const hasCreateUserPermission = currentUserPermissions.includes("create_user");
+
+    // 如果有创建用户的权限，则显示添加用户按钮
+    if (hasCreateUserPermission) {
+        document.getElementById("addUserButton").style.display = "block";
+    }
+
 }
 
 function openUserActionModal(user) {
@@ -85,20 +93,31 @@ function openUserActionModal(user) {
     // 调用统一的 openModal 函数来显示模态框
     openModal('userActionModal');
 
+    // 检查用户是否有修改或删除用户的权限
+    const hasUpdateUserPermission = currentUserPermissions.includes("update_user");
+    const hasDeleteUserPermission = currentUserPermissions.includes("delete_user");
+
     // 处理修改用户按钮点击
-    document.getElementById("editUserButton").onclick = () => {
-        closeModal("userActionModal"); // 先关闭用户信息模态框
-        editUser(user); // 打开编辑用户模态框
-    };
+    if (hasUpdateUserPermission) {
+        document.getElementById("editUserButton").onclick = () => {
+            closeModal("userActionModal"); // 先关闭用户信息模态框
+            editUser(user); // 打开编辑用户模态框
+        };
+    } else {
+        document.getElementById("editUserButton").style.display = "none"; // 如果没有权限，则隐藏按钮
+    }
 
     // 处理删除用户按钮点击
-    document.getElementById("deleteUserButton").onclick = () => {
-        const userConfirmation = confirm("确定要删除该用户吗？");
-        if (userConfirmation) {
-            deleteUser(user);
-        }
-    };
-
+    if (hasDeleteUserPermission) {
+        document.getElementById("deleteUserButton").onclick = () => {
+            const userConfirmation = confirm("确定要删除该用户吗？");
+            if (userConfirmation) {
+                deleteUser(user);
+            }
+        };
+    } else {
+        document.getElementById("deleteUserButton").style.display = "none"; // 如果没有权限，则隐藏按钮
+    }
 
     // 关闭模态框的点击事件（右上角关闭按钮）
     document.querySelector(".user-info-close").onclick = function() {
@@ -116,6 +135,7 @@ function openUserActionModal(user) {
 
 
 
+
 //修改用户
 function editUser(user) {
     const modal = document.getElementById("editUserModal");

static/user/user_management.html

@@ -9,15 +9,12 @@
 </head>
 <body>
  
-    <h2>用户管理页面</h2>
-    <p>这是用户管理相关的内容。</p>
-   
-
+ 
 
     <div id="user-management">
         <div style="display: flex; align-items: center; justify-content: space-between;">
             <h2>用户管理</h2> 
-            <button id="addUserButton" class="user-info-create-role-button" >添加用户</button>           <!-- style="display: none;" -->
+            <button id="addUserButton" class="user-info-create-role-button" style="display: none;">添加用户</button>           <!-- style="display: none;" -->
         </div>
         <div id="users-cards" class="user-info-cards-container">