feat: 添加平台使用分析

src/pages/cloudOMS/usingAnalysis/index.less

+@import '~antd/es/style/themes/default.less';
+
+@background-color-container: #f5f5f5;
+@border-radius: 2px;
+.usingAnalysis {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: @background-color-container;
+
+    :global {
+        .@{ant-prefix}-spin-nested-loading,
+        .@{ant-prefix}-spin-container {
+            height: 100%;
+        }
+        .anticon {
+            vertical-align: 0.125em; 
+        }
+        .back-btn {
+            font-size: 16px;
+            opacity: 0.75;
+            cursor: pointer;
+            line-height: 32px;
+            user-select: none;
+            .anticon {
+                transform: translateX(0px);
+                transition: transform 0.3s;
+            }
+            &:hover {
+                .anticon {
+                    transform: translateX(-4px);
+                }
+            }
+        }
+
+        .cua-content {
+            width: 100%;
+            height: 100%;
+            min-width: 1150px;
+            // padding: 5px 8px;
+            // 顶部筛选条件
+            .cua-header {
+                background-color: #FFF;
+                border-radius: @border-radius;
+                padding: 8px;
+                display: flex;
+                align-items: center;
+                gap: 20px;
+    
+                .filter-item {
+                    min-width: 220px;
+                    .@{ant-prefix}-select {
+                        width: 140px;
+                    }
+                }
+                .sub-title {
+                    margin-left: auto;
+    
+                    font-size: 12px;
+                    color: #aaa;
+                }
+            }
+    
+            .counter-list {
+                margin-top: 4px;
+                display: flex;
+                gap: 4px;
+
+                .@{ant-prefix}-card {
+                    flex: 1 1;
+
+                    .@{ant-prefix}-card-body {
+                        padding: 8px;
+                    }
+                }
+            }
+
+            .cua-main {
+                height: calc(100% - 136px);
+                margin-top: 4px;
+                display: flex;
+                flex-direction: column;
+                .cua-main-middle {
+                    flex: 1;
+                    overflow: hidden;
+                    width: 100%;
+                    min-height: 200px;
+                    margin-bottom: 5px;
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 4px;
+                }
+                .cua-main-bottom {
+                    flex: none;
+                    height: 50%;
+                    width: 100%;
+                    min-height: 320px;
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 4px;
+                    .cua-customer-view {
+                        padding: 10px;
+                        .table-cell-bold {
+                            font-weight: bold;
+                        }
+                        .@{ant-prefix}-table-thead th {
+                            text-align: center;
+                        }
+                    }
+                }
+                .cua-chart-box {
+                    flex: 1;
+                    background-color: #FFF;
+                    padding: 4px 8px 8px 8px;
+                    display: flex;
+                    flex-direction: column;
+                    .cua-chart-header {
+                        flex: none;
+                        display: flex;
+                        align-items: center;
+                        .cua-chart-title {
+                            font-weight: bold;
+                            line-height: 32px;
+                            &::before {
+                                content: "";
+                                display: inline-block;
+                                width: 3px;
+                                height: 14px;
+                                background-color: #1890ff;
+                                vertical-align: -0.125em;
+                                margin-right: 8px;
+                            }
+                        }
+                        .cua-chart-subtitle {
+                            margin-left: auto;
+                        }
+                    }
+                    .cua-chart-content {
+                        flex: 1;
+                        overflow: hidden;
+                    }
+
+                    &.enviromentusing-chart-box {
+                        .cua-chart-content {
+                            overflow: visible;        
+                        }                
+                    }
+                }
+                
+            }
+        }
+    }
+}
+
+.login-log-modal {
+    :global {
+        .login-log-modal-header {
+            display: flex;
+            margin-bottom: 16px;
+            .@{ant-prefix}-form-item {
+                margin-bottom: 0;
+                margin-right: 8px;
+            }
+        }
+        .login-log-modal-content {
+            height: 500px;
+        }
+    }
+}
\ No newline at end of file

src/routes/config.js

@@ -8,6 +8,7 @@ import Iframe from '../pages/iframe';
 import Login from '../pages/user/login';
 import CommonMenu from '../pages/commonMenu';
 import NoSecret from '../pages/user/login/noSecret';
+import UsingAnalysis from '../pages/cloudOMS/usingAnalysis';
 
 export const dyRoutes = (routes, layout) => {
   // eslint-disable-next-line no-shadow
@@ -34,6 +35,10 @@ export const dyRoutes = (routes, layout) => {
         path: '/industry',
         component: BootPage,
       },
+      {
+        path: '/usingAnalysis',
+        component: UsingAnalysis,
+      },
       {
         path: '/',
         component: BasicLayout,