空调监控

.umirc.ts

@@ -75,6 +75,11 @@ export default defineConfig({
       path: '/smart/simulate/:projectId',
       component: './Smart/Simulate',
     },
+    {
+      name: '空调监控',
+      path: '/hardware-controller/air-conditioner/:projectId',
+      component: './HardwareController/AirConditioner',
+    },
     {
       name: '系统自检',
       path: '/self-inspection/:projectId',

src/components/ThresholdDetail/ThresholdModal.js

@@ -3,7 +3,6 @@ import {
   Card,
   Col,
   Form,
-  Icon,
   Input,
   InputNumber,
   Modal,
@@ -29,13 +28,6 @@ export default function ThresholdModal(props) {
           size="small"
           style={{ marginBottom: 16 }}
           title={`阈值${index + 1}`}
-          extra={
-            <Icon
-              type="delete"
-              style={{ fontSize: 20, color: '#fff' }}
-              onClick={() => deleteThreshold(index, key)}
-            />
-          }
         >
           <Form.Item
             label="阈值类型"

src/pages/HardwareController/AirConditioner.js

@@ -0,0 +1,55 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { queryConditionSnapshot } from '@/services/SmartOps';
+import { useParams, useRequest } from '@umijs/max';
+import styles from './AirConditioner.less';
+
+const Work = (props) => {
+  const { projectId } = useParams();
+
+  const { data, loading } = useRequest(queryConditionSnapshot, {
+    defaultParams: [{ project_id: projectId }],
+    initialData: {},
+  });
+
+  return (
+    <PageContent>
+      <PageTitle>空调控制</PageTitle>
+      <div className={styles.desc}>当前空间&nbsp;&nbsp;温度：26 湿度：2.4%</div>
+      <div className={`card-box ${styles.top}`}>
+        <div className={styles.left}>
+          <img
+            className={styles.img}
+            src={require('@/assets/air-conditioner.png')}
+          />
+          <div>
+            <div className={styles.number}>23</div>
+            空调数量
+          </div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.row}>
+            <i className={styles.icon}></i> 在线：137
+          </div>
+          <div className={styles.row}>
+            <i className={`${styles.icon} ${styles.error}`}></i> 在线：137
+          </div>
+          <div className={styles.row}>
+            <i className={`${styles.icon} ${styles.offline}`}></i> 在线：137
+          </div>
+        </div>
+      </div>
+      <div className="card-box">
+        <i className={styles.icon}></i> 空调1
+      </div>
+      <div className="card-box">
+        <i className={styles.icon}></i> 空调2
+      </div>
+      <div className="card-box">
+        <i className={`${styles.icon} ${styles.error}`}></i> 空调3
+      </div>
+    </PageContent>
+  );
+};
+
+export default Work;

src/pages/HardwareController/AirConditioner.less

@@ -1,7 +1,28 @@
 .desc {
   position: absolute;
-  top: 30px;
+  top: 20px;
   left: 50%;
   transform: translateX(-50%);  
   font-size: 22px;
+}
+.top {
+  display: flex;
+  margin-top: 40px;
+  padding: 20px;
+  .left {
+    width: 50%;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+  }
+  .img {
+    width: 200px;
+    margin-right: 30px;
+  }
+  .number {
+    font-size: 48px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #4A90E2;
+  }
 }

src/pages/Smart/components/SimulateDetail.js

@@ -12,8 +12,9 @@ import {
   queryMembraneList,
   queryProjectConfig,
 } from '@/services/SmartOps';
+import { AreaChartOutlined } from '@ant-design/icons';
 import { useRequest } from '@umijs/max';
-import { DatePicker, Icon, Modal, Select, Spin } from 'antd';
+import { DatePicker, Modal, Select, Spin } from 'antd';
 import dayjs from 'dayjs';
 import * as echarts from 'echarts';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -249,8 +250,7 @@ const ChartContent = (props) => {
             ))}
           </div>
           {active == 1 && (
-            <Icon
-              type="area-chart"
+            <AreaChartOutlined
               style={{ float: 'right', lineHeight: '56px', marginRight: 20 }}
               onClick={() => setVisible(true)}
             />