看板

config/proxy.js

@@ -12,8 +12,8 @@ export default {
     "/srwms/": {
       // 要代理的地址
       // target: "http://192.168.40.18/wms/", //39:28040    18/wms/  
-      target: "http://192.168.40.203:28040", //39:28040    18/wms/    dj
-      // target: "http://192.168.40.117:28040", //39:28040    18/wms/   jf
+      // target: "http://192.168.40.203:28040", //39:28040    18/wms/    dj
+      target: "http://192.168.40.117:28040", //39:28040    18/wms/   jf
       // target: "http://192.168.40.108:28040", //39:28040    18/wms/   jf
       changeOrigin: true,
       pathRewrite: {

package.json

@@ -52,7 +52,7 @@
     "@ant-design/pro-table": "^2.80.2",
     "@ant-design/pro-utils": "^1.45.1",
     "@babel/runtime": "^7.18.3",
-    "@jiaminghi/data-view-react": "^1.2.5",
+    "@jiaminghi/data-view-react": "^1.1.7",
     "@umijs/route-utils": "^2.0.0",
     "ahooks": "^3.3.12",
     "antd": "^4.21.5",

src/components/TagView/index.css

+.tag_view .tags_container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 20;
+  width: 100%;
+  height: 36px;
+}
+.child {
+  position: relative;
+  height: calc(100vh - 98px);
+  overflow: hidden;
+}
+.child .contianbox {
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+}

src/global.less

@@ -9,6 +9,7 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
 html,
 body,
 #root {
@@ -19,6 +20,7 @@ body,
 .colorWeak {
   filter: invert(80%);
 }
+
 .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
   left: unset;
 }
@@ -42,12 +44,15 @@ ol {
   .ant-table {
     width: 100%;
     overflow-x: auto;
-    &-thead > tr,
-    &-tbody > tr {
-      > th,
-      > td {
+
+    &-thead>tr,
+    &-tbody>tr {
+
+      >th,
+      >td {
         white-space: pre;
-        > span {
+
+        >span {
           display: block;
         }
       }
@@ -56,8 +61,9 @@ ol {
 }
 
 // Compatible with IE11
-@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
-  body .ant-design-pro > .ant-layout {
+@media screen and(-ms-high-contrast: active),
+(-ms-high-contrast: none) {
+  body .ant-design-pro>.ant-layout {
     min-height: 100vh;
   }
 }
@@ -83,10 +89,12 @@ ol {
   .ant-card-body {
     padding: 12px !important;
   }
+
   .ant-card-head {
     padding: 0 20px !important;
   }
 }
+
 .ant-drawer-content {
   overflow-x: hidden !important;
 }
@@ -96,6 +104,7 @@ ol {
     padding: 0 !important;
   }
 }
+
 .ant-pro-table-list-toolbar-container {
   padding: 0px !important;
   padding-bottom: 8px !important;
@@ -108,12 +117,14 @@ ol {
   justify-content: space-between !important;
   padding: 10px 0 10px 0 !important;
 }
+
 .ant-pro-form-login-container {
   height: auto !important;
   margin-top: -10vh;
   padding: 0 !important;
   background: transparent !important;
 }
+
 .ant-pro-form-login-main {
   margin-top: 30px !important;
 }
@@ -125,42 +136,51 @@ pre {
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
   white-space: pre-wrap !important;
 }
+
 .gongyiStep {
   height: 100%;
+
   .ant-steps-item-title {
     width: 100% !important;
   }
 }
+
 .center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .spread {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
+
 .columns {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
 .specialpropertiesCard {
   .ant-card-body {
     padding: 5px !important;
   }
 }
+
 .oneText {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 .ant-picker-cell-inner {
   display: flex !important;
   justify-content: center;
+
   .ant-picker-calendar-date-content {
     flex: 1 !important;
   }
@@ -170,16 +190,17 @@ pre {
   .ant-tabs-nav {
     padding: 0 16px;
   }
+
   .ant-tabs-content-holder {
     max-height: 520px;
     padding: 0 16px;
     overflow-y: auto;
   }
 }
+
 .ant-input[disabled],
-.ant-picker-input > input[disabled],
-.ant-select-disabled.ant-select:not(.ant-select-customize-input)
-  .ant-select-selector,
+.ant-picker-input>input[disabled],
+.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
   color: rgba(0, 0, 0, 0.85) !important;
 }
@@ -191,6 +212,7 @@ pre {
     }
   }
 }
+
 .row-dragging {
   z-index: 999999999999;
   background: #fafafa;
@@ -204,6 +226,7 @@ pre {
 .row-dragging .drag-visible {
   visibility: visible;
 }
+
 //reset end
 
 .img {
@@ -213,21 +236,26 @@ pre {
   background-position: center;
   background-size: cover;
 }
+
 .cover {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
+
   img {
     width: 30%;
     margin: 30px 0 0 30px;
   }
 }
+
 .ant-pro-form-login-desc {
   margin-bottom: 0 !important;
 }
+
 .ant-layout-footer {
   background-color: transparent !important;
+
   .ant-pro-global-footer {
     margin: 0 !important;
     padding: 0 !important;
@@ -238,62 +266,79 @@ pre {
   .ant-tabs-nav-wrap {
     display: inline-block !important;
   }
+
   .ant-tabs-tab-active {
     font-size: 16px !important;
   }
+
   .ant-layout-footer {
     background-color: #23394a !important;
+
     .ant-pro-global-footer {
       margin: 0 0 20px 0 !important;
       padding: 0 !important;
+
       * {
         color: rgba(255, 255, 255, 0.6) !important;
       }
+
       .ant-pro-global-footer-copyright {
         color: rgba(255, 255, 255, 0.3) !important;
       }
     }
   }
+
   .ant-input-affix-wrapper {
     background-color: rgba(255, 255, 255, 0.3) !important;
     border: none !important;
+
     input {
       color: #fff !important;
       background-color: rgba(255, 255, 255, 0) !important;
     }
   }
+
   .ant-select-selector {
     background-color: rgba(255, 255, 255, 0.3) !important;
     border: none !important;
+
     input {
       color: #fff !important;
       background-color: rgba(255, 255, 255, 0) !important;
     }
   }
+
   .ant-input {
     color: #fff !important;
     background-color: rgba(255, 255, 255, 0.3) !important;
     border: none !important;
   }
+
   .ant-select-selection-item {
     color: #fff !important;
   }
+
   .anticon-close-circle {
     color: #fff !important;
   }
+
   .anticon {
     color: #fff !important;
   }
+
   .ant-select-clear {
     background-color: transparent !important;
   }
+
   .ant-select-selection-item-content,
   .ant-select-selection-item-remove {
     color: #000 !important;
+
     .anticon {
       color: #000 !important;
     }
   }
+
   .ant-select-selection-overflow {
     display: flex !important;
     flex-wrap: nowrap !important;
@@ -306,38 +351,48 @@ pre {
     font-weight: normal !important;
   }
 }
+
 .ant-layout-header {
   transition: all 200ms !important;
   transition-timing-function: ease-out !important;
 }
+
 .ant-pro-global-header {
   padding-left: 6px !important;
 }
+
 table {
   min-width: calc(100% - 6px) !important;
 }
+
 .ant-drawer-open {
   transform: none !important;
 }
+
 .ant-pro-table-list-toolbar {
   overflow: hidden !important;
 }
+
 .ant-select-selector {
   overflow: hidden !important;
 }
+
 .ant-breadcrumb {
   span {
-    > span {
+    >span {
       max-width: 600px !important;
     }
   }
 }
+
 .ant-tree .ant-tree-treenode {
   width: 100%;
-  > span:last-child {
+
+  >span:last-child {
     flex: 1;
   }
 }
+
 .ant-input-number-affix-wrapper,
 .ant-input-number {
   width: 100% !important;
@@ -350,6 +405,7 @@ table {
 }
 
 @media print {
+
   html,
   body {
     height: initial !important;
@@ -365,20 +421,25 @@ table {
     page-break-after: always;
   }
 }
+
 .ant-pro-card-body {
   padding: 12px !important;
 }
+
 .ant-pagination.ant-pagination-mini .ant-pagination-options-size-changer {
   max-width: 100px !important;
 }
+
 .ant-pagination-options {
   display: flex !important;
   min-width: 210px !important;
 }
+
 #large {
   .header {
     background-color: transparent !important;
   }
+
   .header-item,
   .ceil {
     height: auto !important;
@@ -390,16 +451,20 @@ table {
     word-break: break-all !important;
     border: #000 1px solid !important;
   }
-  .header-item{
+
+  .header-item {
     font-weight: bolder !important;
   }
-  .header-item + .header-item {
+
+  .header-item+.header-item {
     margin-left: -1px !important;
   }
+
   .ceil {
     margin-top: -1px;
   }
-  .ceil + .ceil {
+
+  .ceil+.ceil {
     margin-left: -1px !important;
   }
 
@@ -409,6 +474,7 @@ table {
     line-height: 1 !important;
     background-color: transparent !important;
   }
+
   * {
     overflow: visible !important;
     font-size: 20px !important;
@@ -416,3 +482,26 @@ table {
     word-break: break-all !important;
   }
 }
+
+// .ant-pro-basicLayout {
+//   height: 100% !important;
+
+//   section {
+//     height: 100% !important;
+
+//     >div {
+//       height: 100% !important;
+
+//       main {
+//         height: 100% !important;
+
+//         >div:last-child {
+//           height: 800px!important;
+//           width: 100%;
+
+//         }
+//       }
+//     }
+
+//   }
+// }
\ No newline at end of file

src/pages/Storeboard/Charts.jsx

@@ -20,17 +20,32 @@ export default (props) => {
 
     return {
       grid: {
-        top: 25,
-        left: 35,
-        bottom: 28,
-        right: 15,
+        top: 40,
+        left: 38,
+        bottom: 60,
+        right: 14,
       },
       xAxis: {
         type: "category",
         data: xData,
+        splitLine: {
+          show: false,
+        },
+
+        axisLabel: {
+          interval: 0, //如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
+          rotate: "45", // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
+        },
       },
       yAxis: {
         type: "value",
+        splitLine: {
+          show: false,
+        },
+        name: title === "出入库单数量" ? "条" : "kg",
+        nameTextStyle: {
+          padding:[0,26,0,0]
+        }
       },
       series: [
         {
@@ -89,7 +104,7 @@ export default (props) => {
 
   return (
     <>
-      <div className="data-content">
+      <div className="data-content" style={{ position: "relative" }}>
         <div className="content-header">{title}</div>
         <div className="content-charts">
           <ReactECharts
@@ -97,6 +112,30 @@ export default (props) => {
             style={{ height: "100%", width: "100%" }}
           />
         </div>
+        <div
+          style={{
+            position: "absolute",
+            display: "flex",
+            top: 3,
+            right: 10,
+          }}
+          className="statuslogo"
+        >
+          <div>
+            <div
+              style={{ backgroundColor: "#F36B50" }}
+              className="statustitle"
+            ></div>
+            入库
+          </div>
+          <div>
+            <div
+              style={{ backgroundColor: "#17D8DC" }}
+              className="statustitle"
+            ></div>
+            出库
+          </div>
+        </div>
       </div>
     </>
   );

src/pages/Storeboard/DataTable.jsx

@@ -2,18 +2,22 @@ import { ScrollBoard } from "@jiaminghi/data-view-react";
 import React, { useState, useEffect } from "react";
 import line4_bg from "../../../public/img/table4.png";
 import line5_bg from "../../../public/img/table5.png";
+import line5long_bg from "../../../public/img/table5_long.png";
 import { useMemo } from "react";
 
 const statusBgc = function (state) {
-  if (state === 4) {
+  if (state === "待入库任务") {
     return { width: "100%", "--bgUrl--": `url(${line4_bg})` };
-  } else if (state === 5) {
+  } else if (state === "待出库任务") {
+    return { width: "100%", "--bgUrl--": `url(${line5long_bg})` };
+  } else if (state === "库存统计") {
     return { width: "100%", "--bgUrl--": `url(${line5_bg})` };
   }
 };
 
 export default (props) => {
   const { title, headTitle, data } = props;
+
   const config = useMemo(() => {
     let configArr = [];
     if (title === "待入库任务") {
@@ -26,6 +30,15 @@ export default (props) => {
         ];
         configArr.push(arr);
       });
+      if (configArr.length < 6) {
+        let l = 6 - configArr.length;
+        const newArr = Array.from({ length: l }, () => new Array(4).fill(" "));
+        console.log(newArr);
+        newArr.forEach((it) => {
+          configArr.push(it);
+        });
+        console.log(configArr);
+      }
     } else if (title === "待出库任务") {
       data?.forEach((it) => {
         let arr = [
@@ -37,6 +50,15 @@ export default (props) => {
         ];
         configArr.push(arr);
       });
+      if (configArr.length < 6) {
+        let l = 6 - configArr.length;
+        const newArr = Array.from({ length: l }, () => new Array(5).fill(" "));
+        console.log(newArr);
+        newArr.forEach((it) => {
+          configArr.push(it);
+        });
+        console.log(configArr);
+      }
     } else if (title === "库存统计") {
       data?.forEach((it) => {
         let arr = [
@@ -48,12 +70,23 @@ export default (props) => {
         ];
         configArr.push(arr);
       });
+      if (configArr.length < 6) {
+        let l = 6 - configArr.length;
+        const newArr = Array.from({ length: l }, () => new Array(5).fill(" "));
+        console.log(newArr);
+        newArr.forEach((it) => {
+          configArr.push(it);
+        });
+        console.log(configArr);
+      }
     }
 
     return {
       data: configArr,
     };
   }, [data, title]);
+
+  console.log(config?.data?.length);
   return (
     <>
       <div className="data-content">
@@ -66,8 +99,10 @@ export default (props) => {
         <ScrollBoard
           align={["center"]}
           config={config}
-          style={statusBgc(headTitle?.length)}
-          rowNum={"7"}
+          style={statusBgc(title)}
+          // rowNum={config?.data?.length >= 5 ? 5 : config?.data?.length}
+          rowNum={5}
+          // hoverPause={false}
         />
       </div>
     </>

src/pages/Storeboard/Krjk.jsx

@@ -43,11 +43,11 @@ export default ({ data }) => {
 
   const rgbChange = function (status) {
     if (status == "0") {
-      return "gray";
+      return "#9E9E9E";
     } else if (status == "1") {
-      return "green";
+      return "#7FBB24";
     } else if (status == "2") {
-      return "#00bbf2";
+      return "#489AFF";
     }
   };
   return (
@@ -191,14 +191,14 @@ export default ({ data }) => {
           </div>
           <div>
             <div
-              style={{ backgroundColor: "#00bbf2" }}
+              style={{ backgroundColor: "#489AFF" }}
               className="statustitle"
             ></div>
             占用
           </div>
           <div>
             <div
-              style={{ backgroundColor: "gray" }}
+              style={{ backgroundColor: "#9E9E9E" }}
               className="statustitle"
             ></div>
             不可用

src/pages/Storeboard/index.css

 .kb-container {
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 98px) !important;
   background-color: rgba(26, 32, 44);
 }
 .kb-container header {
@@ -27,7 +27,7 @@
   flex-direction: row;
 }
 .kb-container .kb-content .Left {
-  flex: 1;
+  width: 33.33%;
 }
 .kb-container .kb-content .Left .unit {
   flex: 1;
@@ -67,6 +67,7 @@
 .kb-container .kb-content .Right {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 .kb-container .kb-content .unit {
   background-color: rgba(49, 60, 77, 0.8);
@@ -157,11 +158,15 @@
   background-size: 100% 100%;
   height: calc(100% - 80px);
   background-color: transparent;
-  border-radius: 15px;
+}
+.kb-container .dv-scroll-board .row {
+  width: 100%;
+  height: 100%;
 }
 .kb-container .dv-scroll-board .row-item {
   background-color: transparent !important;
   text-align: center;
+  width: 100%;
 }
 .kb-container .realTime {
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);
@@ -185,7 +190,7 @@
   margin-right: 10px;
 }
 .kb-container .realTime .realTime-content span {
-  color: #00bbf2;
+  color: #1FDBDB;
   font-size: 25px;
   font-weight: 600;
 }
@@ -193,7 +198,7 @@
   display: flex;
   flex-direction: row;
   height: calc(100% - 32px);
-  padding: 12px 0 24px 0;
+  padding: 12px 12px 24px 12px;
 }
 .kb-container .jk-content .jk-content-unit {
   flex: 1;
@@ -217,6 +222,8 @@
   flex: 1;
   height: auto;
   align-self: center;
+  font-size: 16px;
+  padding-top: 6px;
 }
 .kb-container .jk-content .jk-content-unit .jk-statusBottom {
   width: 100%;
@@ -283,8 +290,8 @@
   align-items: center;
 }
 .kb-container .statustitle {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
+  width: 16px;
+  height: 13px;
+  border-radius: 2px;
   margin-right: 3px;
 }

src/pages/Storeboard/index.jsx

@@ -5,7 +5,7 @@ import io from "socket.io-client";
 import Krjk from "./Krjk";
 import Kwxx from "./Kwxx";
 import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
-import { useFullscreen, useRequest } from "ahooks";
+import { useFullscreen, useRequest, useAsyncEffect } from "ahooks";
 import Charts from "./Charts";
 import Clock from "./Clock";
 import {
@@ -42,7 +42,13 @@ export default (second) => {
   const [realNum, setnum] = useState(""); //
   const [monitor, setMonitor] = useState([]); //
   const [stautsnum, setstautsnum] = useState(); //
-  
+  const [divSize, setdivSize] = useState({
+    width: "100%",
+    height: "100%",
+  });
+  const [common, setcommon] = useState(new Date());
+
+  const [socketType, setsocketType] = useState("");
   useEffect(() => {
     socket = io(websocketUrl, {
       reconnectionDelay: 4000,
@@ -54,12 +60,18 @@ export default (second) => {
     //   connect to socketIO server
     socket.connect();
     socket.on("message", (data) => {
-      console.log(data);
+      console.log("socketIO", data);
+      setsocketType(data?.wsMsgModel);
     });
-  }, []);
 
+  }, []);
+  useAsyncEffect(() => {
+    if (!isFullscreen) {
+      setcommon(new Date());
+    }
+  }, [isFullscreen]);
   // getInstoreData
-  useRequest(getInstoreData, {
+  const InstoreDataFetch = useRequest(getInstoreData, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -72,7 +84,7 @@ export default (second) => {
   });
 
   // getOutstoreData
-  useRequest(getOutstoreData, {
+  const OutstoreDataFetch = useRequest(getOutstoreData, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -85,7 +97,7 @@ export default (second) => {
     },
   });
   // getStationStatistics
-  useRequest(getStationStatistics, {
+  const StationStatisticsFetch = useRequest(getStationStatistics, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -97,7 +109,7 @@ export default (second) => {
     },
   });
   // getInOutstoreNum
-  useRequest(getInOutstoreNum, {
+  const InOutstoreNumFetch = useRequest(getInOutstoreNum, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -109,7 +121,7 @@ export default (second) => {
     },
   });
   // getInOutstoreWeight
-  useRequest(getInOutstoreWeight, {
+  const InOutstoreWeightFetch = useRequest(getInOutstoreWeight, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -121,7 +133,7 @@ export default (second) => {
     },
   });
   // getInOutstoreWeight
-  useRequest(queryRealityWeight, {
+  const RealityWeightFetch = useRequest(queryRealityWeight, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -133,7 +145,7 @@ export default (second) => {
     },
   });
   // queryMonitor
-  useRequest(queryMonitor, {
+  const queryMonitorFetch = useRequest(queryMonitor, {
     manual: false,
     onSuccess: (result, params) => {
       console.log(result);
@@ -145,7 +157,7 @@ export default (second) => {
     },
   });
   // queryMonitor
-  useRequest(queryStore, {
+  const queryStoreFetch = useRequest(queryStore, {
     manual: false,
     onSuccess: (result, params) => {
       setstautsnum(result);
@@ -156,9 +168,40 @@ export default (second) => {
     },
   });
 
+  useEffect(() => {
+    switch (socketType) {
+      case "INDEX_BOARD_INSTORE":
+        InstoreDataFetch.run();
+        break;
+      case "INDEX_BOARD_OUTSTORE":
+        OutstoreDataFetch.run();
+        break;
+      case "INDEX_BOARD_MONITOR":
+        queryMonitorFetch.run();
+        break;
+      case "INDEX_BOARD_STORE":
+        queryStoreFetch.run();
+        break;
+      case "INDEX_BOARD_INVENTORYSTATISTICS":
+        StationStatisticsFetch.run();
+        break;
+      case "INDEX_BOARD_INOUTSTORENUM":
+        InOutstoreNumFetch.run();
+        break;
+      case "INDEX_BOARD_INOUTSTOREWEIGHT":
+        InOutstoreWeightFetch.run();
+        break;
+      case "INDEX_BOARD_REALITYWEIGHT":
+        RealityWeightFetch.run();
+        break;
+      default:
+        return;
+    }
+  }, [socketType]);
+
   return (
     <>
-      <div className="kb-container" ref={ref}>
+      <div key={common}  className="kb-container" ref={ref}>
         <header>
           <div className="kb-time">
             <Clock />
@@ -254,7 +297,7 @@ export default (second) => {
                   <span>{realNum ?? "--"}</span>
                 </div>
                 <span
-                  style={{ color: "#1FDBDB", fontSize: 24, fontWeight: 600 }}
+                  style={{ color: "#00bbf2", fontSize: 24, fontWeight: 600 }}
                 >
                   KG
                 </span>

src/pages/Storeboard/index.less

 .kb-container {
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 98px) !important;
     background-color: rgba(26, 32, 44);
 
     header {
@@ -33,7 +33,7 @@
         flex-direction: row;
 
         .Left {
-            flex: 1;
+            width: 33.33%;
 
             .unit {
                 flex: 1;
@@ -87,7 +87,7 @@
         .Right {
             display: flex;
             flex-direction: column;
-
+            height: 100%;
         }
 
         .unit {
@@ -202,11 +202,17 @@
         background-size: 100% 100%;
         height: calc(100% - 80px);
         background-color: transparent;
-        border-radius: 15px;
+
+        // border-radius: 15px;
+        .row {
+            width: 100%;
+            height: 100%;
+        }
 
         .row-item {
             background-color: transparent !important;
             text-align: center;
+            width: 100%;
         }
     }
 
@@ -220,7 +226,7 @@
             align-items: center;
             margin: auto;
             justify-self: center;
-            
+
         }
 
         .realTime-content {
@@ -232,8 +238,9 @@
             text-align: center;
             line-height: 70px;
             margin-right: 10px;
+
             span {
-                color: #00bbf2;
+                color: #1FDBDB;
                 font-size: 25px;
                 font-weight: 600;
             }
@@ -244,7 +251,7 @@
         display: flex;
         flex-direction: row;
         height: calc(100% - 32px);
-        padding: 12px 0 24px 0;
+        padding: 12px 12px 24px 12px;
 
         .jk-content-unit {
             flex: 1;
@@ -268,7 +275,8 @@
                         flex: 1;
                         height: auto;
                         align-self: center;
-
+                        font-size: 16px;
+                        padding-top: 6px;
                     }
                 }
             }
@@ -364,9 +372,9 @@
     }
 
     .statustitle {
-        width: 18px;
-        height: 18px;
-        border-radius: 4px;
+        width: 16px;
+        height: 13px;
+        border-radius: 2px;
         margin-right: 3px;
     }
 }
\ No newline at end of file