up

package-lock.json

@@ -11354,6 +11354,16 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -25574,6 +25584,13 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "optional": true,
+      "peer": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "antd": "^5.0.4",
     "axios": "^1.1.3",
     "dayjs": "^1.11.7",
+    "echarts": "^5.4.0",
     "js-base64": "^3.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,8 +25,7 @@
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
-    "web-vitals": "^2.1.4",
-    "echarts": "^5.4.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "dev": "react-app-rewired start",

src/assets/styles/base.css

@@ -35,6 +35,7 @@ ul {
   min-width: 1600px;
   min-height: 900px;
   overflow-y: auto;
+
 }
 /* 主题色 */
 :root{

src/components/BreadTit/index.module.scss

@@ -0,0 +1,17 @@
+.BreadTit{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  :global{
+    .splitStr{
+      margin: 0 5px;
+    }
+    .breadTitRow{
+      font-size: 16px;
+    }
+    .active{
+      color: var(--themeColor);
+    }
+  }
+}

src/components/BreadTit/index.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import styles from "./index.module.scss";
+
+type Props ={
+  children: ReactNode;
+}
+
+ function BreadTit({children}:Props) {
+  return (
+    <div className={styles.BreadTit}>
+      {children}
+    </div>
+  )
+}
+const MemoBreadTit = React.memo(BreadTit);
+
+export default MemoBreadTit;

src/index.tsx

@@ -1,21 +1,26 @@
 import App from "./App";
 import store from "./store/index";
+
 import { Provider } from "react-redux";
+import { createRoot } from "react-dom/client";
 
-import zhCN from "antd/es/locale/zh_CN";
 import { ConfigProvider } from "antd";
-
-import { createRoot } from "react-dom/client";
+// import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import locale from "antd/locale/zh_CN";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
 
 root.render(
-  <ConfigProvider locale={zhCN} theme={{
-    token:{
-      colorPrimary:'#9F1927'
-    }
-  }}>
+  <ConfigProvider
+    locale={locale}
+    theme={{
+      token: {
+        colorPrimary: "#9F1927",
+      },
+    }}
+  >
     <Provider store={store}>
       <App />
     </Provider>

src/pages/Layout/index.module.scss

@@ -39,7 +39,8 @@
             font-size: 18px;
             color: #fff;
             height: 100%;
-            &:hover{
+
+            &:hover {
               color: #D3B453;
             }
           }
@@ -83,19 +84,22 @@
             position: absolute;
             left: 0;
             bottom: -80px;
-            &>span{
+
+            &>span {
               display: block;
               width: 100%;
               height: 50%;
               line-height: 50px;
               text-align: center;
-              &:hover{
+
+              &:hover {
                 color: #D3B453;
               }
             }
           }
-          &:hover{
-            .userSet{
+
+          &:hover {
+            .userSet {
               opacity: 1;
               pointer-events: auto;
               bottom: -100px;
@@ -104,27 +108,102 @@
         }
       }
     }
-    .pageMain{
+
+    .pageMain {
       width: 100%;
       height: calc(100% - 90px);
       background-image: url('../../assets/img/login/homeBg.jpg');
       background-size: cover;
-      &>div{
+
+      &>div {
         width: 1600px;
         margin: 0 auto;
         padding-top: 35px;
         height: calc(100% - 30px);
-        .leftBar{
+
+        .leftBar {
           float: left;
           width: 220px;
           height: 100%;
           background-color: #fff;
           border-radius: 5px;
         }
-        .rightMain{
+
+        .rightMain {
           width: calc(100% - 250px);
           height: 100%;
           float: right;
+
+          &>div {
+            width: 100%;
+            height: 100%;
+          }
+
+          .breadTit {
+            padding-left: 35px;
+            background-color: #fff;
+            border-radius: 5px;
+            width: 100%;
+            height: 50px;
+            margin-bottom: 20px;
+          }
+
+          .objectSonMain {
+            background-color: #fff;
+            border-radius: 5px;
+            width: 100%;
+            height: calc(100% - 70px);
+
+            .objectSonMainTit {
+              width: calc(100% - 30px);
+              margin: 0 auto 20px;
+              height: 60px;
+              border-bottom: 2px solid #999999;
+              padding: 0 5px;
+              display: flex;
+
+              &>div {
+                cursor: pointer;
+                height: 100%;
+                line-height: 58px;
+                padding: 0 15px;
+                font-size: 16px;
+                margin-right: 50px;
+              }
+
+              .active {
+                font-weight: 700;
+                color: var(--themeColor);
+                pointer-events: none;
+                position: relative;
+
+                &::before {
+                  content: '';
+                  z-index: 10;
+                  position: absolute;
+                  bottom: -3px;
+                  left: 0;
+                  width: 100%;
+                  height: 4px;
+                  background-color: var(--themeColor);
+                }
+              }
+            }
+
+            .objectSonMainTable {
+              width: calc(100% - 60px);
+              margin: 0 auto;
+              height: calc(100% - 80px);
+              .tableSelectBox{
+                width: 100%;
+                display: flex;
+                align-items: center;
+                .row{
+                  margin-right: 30px;
+                }
+              }
+            }
+          }
         }
       }
     }

src/types/declaration.d.ts

@@ -1,3 +1,4 @@
 declare module 'history'
 declare module '*.scss';
-declare module '*.png';
+declare module '*.png';
+declare module 'moment';