style

src/components/ManagementPage/chartModule.js

@@ -48,6 +48,7 @@ const ChartModule = (props) => {
     onChange,
     currentType,
     chartType = 'line',
+    legend = {},
   } = props;
 
   const [curType, setCurType] = useState(currentType);
@@ -63,6 +64,12 @@ const ChartModule = (props) => {
       return;
     }
     const option = { ...defaultOption };
+    if (legend) {
+      option.legend.textStyle = {
+        ...option.legend.textStyle,
+        ...legend.textStyle,
+      };
+    }
     let series = [];
     switch (chartType) {
       case 'gauge':
@@ -195,7 +202,7 @@ const defaultOption = {
   tooltip: {
     trigger: 'axis',
     textStyle: {
-      fontSize: 24
+      fontSize: 24,
     },
   },
   grid: {

src/pages/SmartOps/ChartPage.js

@@ -135,6 +135,11 @@ const ChartPage = (props) => {
     const options = {
       yName: '',
       xData: data.length > 0 && data[0]?.map((item) => item.htime_at),
+      legend: {
+        textStyle: {
+          color: '#ffffff',
+        },
+      },
       dataList: data?.map((item) => {
         return {
           type: 0,
@@ -155,7 +160,7 @@ const ChartPage = (props) => {
   };
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <div
         style={{
           display: 'flex',
@@ -166,8 +171,10 @@ const ChartPage = (props) => {
         <div className={styles.form}>
           <Form.Item style={{ marginBottom: 0 }}>
             <RangePicker
+              dropdownClassName={styles.formDropDown}
               value={timeRange}
               showTime={false}
+              inputReadOnly
               disabledDate={(current) =>
                 current && current > dayjs().endOf('day')
               }
@@ -186,6 +193,8 @@ const ChartPage = (props) => {
                 type="primary"
                 style={{
                   marginRight: 20,
+                  fontSize: 24,
+                  height: 50,
                   background: timeActive == index ? '#329BFE' : '#2F4D83',
                 }}
                 onClick={() => {

src/pages/SmartOps/index.less

@@ -161,11 +161,47 @@
 }
 
 .form {
-  width: calc(100% - 35px);
+  width: 100%;
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  :global {
+    .ant-picker {
+      background: #2f4d83;
+      .ant-picker-input > input {
+        color: #ffffff;
+      }
+      .ant-picker-separator {
+        color: #ffffff;
+      }
+      .ant-picker-suffix {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+body .formDropDown :global {
+  .ant-picker-range-arrow::after {
+    background: #2f4d83;
+  }
+  .ant-picker-panel-container {
+    background: #2f4d83;
+  }
+  .ant-picker-header {
+    color: #ffffff;
+  }
+  table {
+    background-color: #2f4d83;
+  }
+  .ant-picker-content th {
+    color: white;
+  }
+  .ant-picker-cell {
+    color: white;
+  }
 }
 
 .tableSelect {