Merge branch 'master' of lizhiqi/yongxu-web into master

config/routes.ts

@@ -84,6 +84,18 @@
     icon: 'Appstore',
     component: './ParameterConfiguration',
   },
+  // {
+  //   path: '/LogManagement',
+  //   name: '日志管理',
+  //   icon: 'Appstore',
+  //   component: './LogManagement',
+  // },
+  {
+    path: '/ProductionDataManagement',
+    name: '产测数据管理',
+    icon: 'Appstore',
+    component: './ProductionDataManagement',
+  },
   // 房间列表
   {
     path: '/roomList',

src/pages/ParameterConfiguration/index.tsx

@@ -183,7 +183,7 @@ const ParameterConfiguration: React.FC = () => {
     {
       title: '名称',
       dataIndex: 'name',
-      key: 'version',
+      key: 'name',
     },
     {
       title: '参数值',

src/pages/ProductionDataManagement/dataCheck.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { Descriptions, Modal } from 'antd';
+
+interface editPros {
+  dataVisible: boolean;
+  checkParams: any;
+  editCallback: () => void;
+}
+
+const DataCheck: React.FC<editPros> = (props) => {
+  const { dataVisible, checkParams, editCallback } = props;
+
+  const [data, setData] = useState<any>({});
+
+  const modeList = {
+    0: '制冷',
+    1: '制热',
+    2: '除湿',
+    3: '送风',
+    4: '加湿',
+  };
+
+  const onCancel = () => {
+    editCallback();
+  };
+
+  useEffect(() => {
+    if (checkParams) {
+      const params = JSON.parse(checkParams);
+      setData(params);
+    }
+  }, []);
+
+  return (
+    <Modal title="数据" open={dataVisible} onCancel={onCancel} footer={null} width={800}>
+      <Descriptions bordered>
+        <Descriptions.Item label="二氧化碳">{data?.co2}</Descriptions.Item>
+        <Descriptions.Item label="湿度">{data?.currentHumidly} %rh</Descriptions.Item>
+        <Descriptions.Item label="风速">{data?.fanSpeed} m/s</Descriptions.Item>
+        <Descriptions.Item label="风阀五开度">{data?.fanValveFiveDegree}°</Descriptions.Item>
+        <Descriptions.Item label="风阀四开度">{data?.fanValveFourDegree}°</Descriptions.Item>
+        <Descriptions.Item label="风阀三开度">{data?.fanValveThreeDegree}°</Descriptions.Item>
+        <Descriptions.Item label="加水时长">{data?.humidlyOpen} 秒</Descriptions.Item>
+        <Descriptions.Item label="湿度控制">
+          ({data?.humidlyStartAt} - {data?.humidlyStopAt}) %
+        </Descriptions.Item>
+        <Descriptions.Item label="加水停止时长">{data?.humidlyStopAt} 分钟</Descriptions.Item>
+        <Descriptions.Item label="模式">{modeList[data?.mode]}</Descriptions.Item>
+        <Descriptions.Item label="是否打开新风">
+          {{ 1: '关', 2: '开' }[data?.newFan]}
+        </Descriptions.Item>
+        <Descriptions.Item label="PM2.5">{data?.pm25} μg/m³</Descriptions.Item>
+        <Descriptions.Item label="开关">{{ 0: '关', 1: '开' }[data?.power]}</Descriptions.Item>
+        <Descriptions.Item label="设定温度">{data?.setTemp} °C</Descriptions.Item>
+        <Descriptions.Item label="电磁阀">{data?.solenoidValve}</Descriptions.Item>
+        <Descriptions.Item label="高水位报警">{data?.waterAlarm}</Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+export default DataCheck;

src/pages/ProductionDataManagement/detectionData.tsx

@@ -0,0 +1,102 @@
+import { Modal, Space, Table } from 'antd';
+import React, { useState } from 'react';
+import type { ColumnsType } from 'antd/es/table';
+import DataCheck from '@/pages/ProductionDataManagement/dataCheck';
+
+interface editPros {
+  visible: boolean;
+  editCallback: () => void;
+  params: any;
+}
+
+interface DataType {
+  record_id: string;
+  deviceCode: string;
+  name: string;
+  data: string;
+  pass: boolean;
+}
+
+const DetectionData: React.FC<editPros> = (props) => {
+  const { params, visible, editCallback } = props;
+  const [dataVisible, setDataVisible] = useState(false);
+  const [checkParams, setCheckParams] = useState({});
+
+  const onOk = () => {
+    editCallback();
+  };
+
+  const onCancel = () => {
+    editCallback();
+  };
+
+  // 查看数据弹框
+  const checkData = (record: any) => {
+    setDataVisible(true);
+    setCheckParams(record?.data);
+  };
+
+  // 查看数据弹框回调
+  const checkDataCallback = () => {
+    setDataVisible(false);
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'deviceCode',
+      key: 'deviceCode',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '是否通过',
+      dataIndex: 'pass',
+      key: 'pass',
+      render: (v) => (v ? '通过' : '不通过'),
+    },
+    {
+      title: '检测数据',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              checkData(record);
+            }}
+          >
+            查看
+          </a>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Modal title="数据" open={visible} onOk={onOk} onCancel={onCancel} width={800}>
+      <Table
+        columns={columns}
+        dataSource={params.steps}
+        rowKey={(record) => record.record_id}
+        style={{ margin: '20px 0' }}
+      />
+      {dataVisible && (
+        <DataCheck
+          dataVisible={dataVisible}
+          editCallback={checkDataCallback}
+          checkParams={checkParams}
+        />
+      )}
+    </Modal>
+  );
+};
+export default DetectionData;

src/pages/ProductionDataManagement/index.tsx

@@ -0,0 +1,153 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Card, Space, Table } from 'antd';
+import React, { useEffect, useState } from 'react';
+import type { ColumnsType } from 'antd/es/table';
+import { queryDataList } from '@/services/ProductionDataManagement';
+import { queryRole } from '@/services/role';
+import DetectionData from '@/pages/ProductionDataManagement/detectionData';
+
+interface DataType {
+  record_id: string;
+  name: string;
+}
+
+const ProductionDataManagement: React.FC = () => {
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [loading, setLoading] = useState(false);
+  const [dataList, setDataList] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [params, setParams] = useState({});
+
+  // 获取数据
+  const getList = () => {
+    const data = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+    };
+    queryDataList(data).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    getList();
+  }, []);
+
+  // table切换
+  const tableChange = () => {
+    setLoading(true);
+    const data = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+    };
+    queryRole(data).then((res) => {
+      if (res && res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  // 时间戳转时间格式
+  const timestampToTime = (timestamp: any) => {
+    const date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+    const Y = date.getFullYear() + '-';
+    const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + '-';
+    const D = date.getDate() + ' ';
+    const h = date.getHours() + ':';
+    const m = date.getMinutes() + ':';
+    const s = date.getSeconds();
+    return Y + M + D + h + m + s;
+  };
+
+  // 检测数据弹框打开
+  const detectionData = (record: any) => {
+    setVisible(true);
+    setParams(record);
+  };
+
+  const editCallback = () => {
+    setVisible(false);
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'deviceCode',
+      key: 'deviceCode',
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      render: (v) => v && timestampToTime(v),
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      render: (v) => v && timestampToTime(v),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              detectionData(record);
+            }}
+          >
+            设备数据
+          </a>
+        </Space>
+      ),
+    },
+  ];
+
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => {
+      return <span> 共 {total}条 </span>;
+    },
+    ...pagination,
+  };
+
+  return (
+    <PageContainer>
+      <div>
+        <Card>
+          <Table
+            columns={columns}
+            dataSource={dataList}
+            rowKey={(record) => record.record_id}
+            pagination={paginationProps}
+            loading={loading}
+            onChange={tableChange}
+            style={{ margin: '20px 0' }}
+          />
+          {visible && (
+            <DetectionData visible={visible} editCallback={editCallback} params={params} />
+          )}
+        </Card>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default ProductionDataManagement;

src/services/ProductionDataManagement.ts

@@ -0,0 +1,10 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 产测数据列表
+ * @param params
+ */
+export async function queryDataList(params: object) {
+  return request(`/web/v1/device_testing?${stringify(params)}`);
+}