fix: 修复物联网卡样式

src/pages/device/components/Metadata/index.tsx

@@ -14,7 +14,6 @@ import { PermissionButton } from '@/components';
 import { Store } from 'jetlinks-store';
 import SystemConst from '@/utils/const';
 import { useParams } from 'umi';
-import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
 
 interface Props {
@@ -32,8 +31,6 @@ const Metadata = observer((props: Props) => {
     props.type === 'device' ? 'device/Instance' : 'device/Product',
   );
 
-  const { minHeight } = useDomFullHeight(`.device-detail-metadata`, 12);
-
   const params = useParams<{ id: string }>();
 
   const resetMetadata = async () => {
@@ -48,7 +45,7 @@ const Metadata = observer((props: Props) => {
   };
 
   return (
-    <div className={'device-detail-metadata'} style={{ position: 'relative', minHeight }}>
+    <div className={'device-detail-metadata'} style={{ position: 'relative' }}>
       <div className={styles.tips} style={{ width: '40%' }}>
         <Tooltip
           title={

src/pages/iot-card/CardManagement/Detail/index.less

@@ -11,6 +11,7 @@
   .iot-card-detail-total-right {
     display: flex;
     flex-basis: 600px;
+    flex-direction: column;
     padding: 24px;
     background-color: #fff;
   }

src/pages/iot-card/Dashboard/index.less

@@ -45,6 +45,25 @@
   text-align: right;
 }
 
+.total-echarts {
+  display: flex;
+  gap: 24px;
+}
+
+.total-echarts-left {
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.total-echarts-right {
+  display: flex;
+  flex-basis: 500px;
+  flex-direction: column;
+  padding: 24px;
+  background-color: #fff;
+}
+
 .number-item-1 {
   color: #e50012;
   background-color: rgba(#e50012, 0.1);

src/pages/iot-card/Dashboard/index.tsx

@@ -1,6 +1,6 @@
 import DashBoard, { DashBoardTopCard } from '@/components/DashBoard';
 import Echarts from '@/components/DashBoard/echarts';
-import { Card, Col, DatePicker, Row, Progress, Empty } from 'antd';
+import { DatePicker, Progress, Empty } from 'antd';
 import moment from 'moment';
 import styles from './index.less';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -325,8 +325,8 @@ const Dashboard = () => {
           </DashBoardTopCard.Item>
         </DashBoardTopCard>
       </div>
-      <Row gutter={24}>
-        <Col flex={'auto'}>
+      <div className={styles['total-echarts']}>
+        <div className={styles['total-echarts-left']}>
           <DashBoard
             title="流量统计"
             height={604}
@@ -341,58 +341,54 @@ const Dashboard = () => {
               { label: '近一月', value: 'month' },
             ]}
           />
-        </Col>
-        <Col flex={'520px'}>
-          <Card>
-            <div className={styles.topName} style={{ height: 50 }}>
-              <span>流量使用TOP10</span>
-              <div>
-                {
-                  // @ts-ignore
-                  <DatePicker.RangePicker
-                    defaultValue={[moment().subtract(6, 'days'), moment(new Date(), 'YYYY-MM-DD')]}
-                    format={'YYYY-MM-DD'}
-                    onChange={(dates) => {
-                      getTopRang(
-                        dates?.[0].startOf('days').valueOf(),
-                        dates?.[1].endOf('days').valueOf(),
-                      );
-                    }}
-                  />
-                }
-              </div>
+        </div>
+        <div className={styles['total-echarts-right']}>
+          <div className={styles.topName} style={{ height: 50 }}>
+            <span>流量使用TOP10</span>
+            <div>
+              {
+                // @ts-ignore
+                <DatePicker.RangePicker
+                  defaultValue={[moment().subtract(6, 'days'), moment(new Date(), 'YYYY-MM-DD')]}
+                  format={'YYYY-MM-DD'}
+                  onChange={(dates) => {
+                    getTopRang(
+                      dates?.[0].startOf('days').valueOf(),
+                      dates?.[1].endOf('days').valueOf(),
+                    );
+                  }}
+                />
+              }
             </div>
-            <div className={styles.rankingList} style={{ height: 490 }}>
-              {topList.length ? (
-                topList.map((item: any, index) => {
-                  return (
-                    <div className={styles.rankItem} key={item.cardNum}>
-                      <div
-                        className={classNames(styles.number, styles[`number-item-${index + 1}`])}
-                      >
-                        {index + 1}
-                      </div>
-                      <div className={styles.cardNum}>{item.cardNum}</div>
-                      <div className={styles.progress}>
-                        <Progress
-                          strokeColor={'#ADC6FF'}
-                          trailColor={'#E0E4E8'}
-                          strokeLinecap="butt"
-                          showInfo={false}
-                          percent={Math.ceil((item.value / topTotal) * 100)}
-                        />
-                      </div>
-                      <div className={styles.total}>{item?.value?.toFixed(2)} M</div>
+          </div>
+          <div className={styles.rankingList} style={{ height: 490 }}>
+            {topList.length ? (
+              topList.map((item: any, index) => {
+                return (
+                  <div className={styles.rankItem} key={item.cardNum}>
+                    <div className={classNames(styles.number, styles[`number-item-${index + 1}`])}>
+                      {index + 1}
                     </div>
-                  );
-                })
-              ) : (
-                <Empty />
-              )}
-            </div>
-          </Card>
-        </Col>
-      </Row>
+                    <div className={styles.cardNum}>{item.cardNum}</div>
+                    <div className={styles.progress}>
+                      <Progress
+                        strokeColor={'#ADC6FF'}
+                        trailColor={'#E0E4E8'}
+                        strokeLinecap="butt"
+                        showInfo={false}
+                        percent={Math.ceil((item.value / topTotal) * 100)}
+                      />
+                    </div>
+                    <div className={styles.total}>{item?.value?.toFixed(2)} M</div>
+                  </div>
+                );
+              })
+            ) : (
+              <Empty />
+            )}
+          </div>
+        </div>
+      </div>
     </PageContainer>
   );
 };