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

config/routes.ts

@@ -175,6 +175,12 @@
       },
     ],
   },
+  {
+    path: '/AfterSalesManagement',
+    name: '售后管理',
+    icon: 'Appstore',
+    component: './AfterSalesManagement',
+  },
   // 房间列表
   {
     path: '/roomList',

src/pages/AfterSalesManagement/deviceHistory.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import moment from 'moment/moment';
+import { queryDeviceRunState } from '@/services/afterSales';
+
+interface editProps {
+  visible: boolean;
+  editCallback: () => void;
+  params: any;
+}
+
+interface DataType {
+  created_at: string;
+  start_time: string;
+  end_time: string;
+  duration: number;
+  record_id: string;
+}
+
+/**
+ * 设备运行历史
+ * @param props
+ * @constructor
+ */
+const DeviceHistory: React.FC<editProps> = (props) => {
+  const { params, visible, editCallback } = props;
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [loading, setLoading] = useState(false);
+  const [list, setList] = useState([]);
+
+  // 设备运行历史
+  const onHistory = () => {
+    setLoading(true);
+    const data = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      device_id: params.device_code,
+    };
+    queryDeviceRunState(data).then((res) => {
+      if (res && res.code === 0) {
+        setList(res.data.list || []);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (params) {
+      onHistory();
+    }
+  }, []);
+
+  const tableChange = (page: any) => {
+    setLoading(true);
+    const data = {
+      q: 'page',
+      current: page.current,
+      pageSize: page.pageSize,
+      device_id: params.device_code,
+    };
+    queryDeviceRunState(data).then((res) => {
+      if (res && res.code === 0) {
+        setList(res.data.list || []);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, _row: any, index: number) => index + 1,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '开机时间',
+      dataIndex: 'start_time',
+      key: 'start_time',
+      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '关机时间',
+      dataIndex: 'end_time',
+      key: 'end_time',
+      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '运行时长（小时）',
+      dataIndex: 'duration',
+      key: 'duration',
+    },
+  ];
+
+  return (
+    <Modal
+      title="设备运行历史"
+      width={800}
+      footer={null}
+      open={visible}
+      onCancel={() => {
+        editCallback();
+      }}
+    >
+      <Table
+        columns={columns}
+        dataSource={list}
+        rowKey={(record) => record.record_id}
+        pagination={pagination}
+        loading={loading}
+        onChange={tableChange}
+      />
+    </Modal>
+  );
+};
+export default DeviceHistory;

src/pages/AfterSalesManagement/deviceStatusData.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Modal, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+interface editProps {
+  visible: boolean;
+  editCallback: () => void;
+  params: any;
+}
+
+interface DataType {
+  record_id: string;
+}
+
+/**
+ * 24小时设备状态数据
+ * @param props
+ * @constructor
+ */
+const DeviceStatusData: React.FC<editProps> = (props) => {
+  const { params, visible, editCallback } = props;
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, _row: any, index: number) => index + 1,
+    },
+    {
+      title: '时间',
+      dataIndex: 'time',
+      key: 'time',
+    },
+    {
+      title: '温度',
+      dataIndex: 'temperature',
+      key: 'temperature',
+      render: (_, record: any) => {
+        return <span>{record.temperature ? record.temperature.toFixed(1) : ''}</span>;
+      },
+    },
+    {
+      title: '湿度',
+      dataIndex: 'humidity',
+      key: 'humidity',
+      render: (_, record: any) => {
+        return <span>{record.humidity ? record.humidity.toFixed(1) : ''}</span>;
+      },
+    },
+    {
+      title: 'CO2',
+      dataIndex: 'co2',
+      key: 'co2',
+    },
+    {
+      title: 'PM25',
+      dataIndex: 'pm25',
+      key: 'pm25',
+    },
+    {
+      title: '开关',
+      dataIndex: 'power',
+      key: 'power',
+      render: (_, record: any) => {
+        return (
+          <span style={{ color: `${{ 0: 'red', 1: 'green' }[record.power]}` }}>
+            {{ 0: '关', 1: '开' }[record.power]}
+          </span>
+        );
+      },
+    },
+  ];
+
+  return (
+    <Modal
+      title="24小时设备状态数据"
+      width={800}
+      footer={null}
+      open={visible}
+      onCancel={() => {
+        editCallback();
+      }}
+    >
+      <Table
+        columns={columns}
+        dataSource={params}
+        rowKey={(record) => record.record_id}
+        pagination={false}
+        scroll={{ y: 500 }}
+      />
+    </Modal>
+  );
+};
+export default DeviceStatusData;

src/pages/AfterSalesManagement/index.tsx

@@ -0,0 +1,307 @@
+import React, { useEffect, useState } from 'react';
+import { PageContainer } from '@ant-design/pro-components';
+import { Button, Form, Input, Space, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { queryDeviceOperations, queryDeviceOperationsData } from '@/services/afterSales';
+import DeviceStatusData from './deviceStatusData';
+import DeviceHistory from '@/pages/AfterSalesManagement/deviceHistory';
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+
+interface DataType {
+  home_name: string;
+  user_name: string;
+  device_code: string;
+  is_online: boolean;
+  power: number;
+  mode: number;
+  speed: number;
+  set_temp: number;
+  temperature: number;
+  humidity: number;
+  fan_voltage: number;
+  record_id: string;
+}
+
+const BannerManagement: React.FC = () => {
+  const [dataList, setDataList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [historyVisible, setHistoryVisible] = useState(false);
+  const [historyData, setHistoryData] = useState(null);
+  const [statusVisible, setStatusVisible] = useState(false);
+  const [statusData, setStatusData] = useState(null);
+  const [form] = Form.useForm();
+  const [searchData, setSearchData] = useState<object | null>({});
+
+  const getList = () => {
+    const params = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryDeviceOperations(params).then((res) => {
+      if (res && res.code === 0) {
+        setDataList(res.data.list || []);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  // 切换分页
+  const tableChange = (page: any) => {
+    setLoading(true);
+    const params = {
+      q: 'page',
+      current: page.current,
+      pageSize: page.pageSize,
+      ...searchData,
+    };
+    queryDeviceOperations(params).then((res) => {
+      if (res && res.code === 0) {
+        setDataList(res.data.list || []);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  useEffect(() => {
+    getList();
+  }, [searchData]);
+
+  // 设备运行历史
+  const onHistory = (record: any) => {
+    setHistoryVisible(true);
+    setHistoryData(record);
+  };
+
+  // 设备运行历史回调
+  const onHistoryCallback = () => {
+    setHistoryVisible(false);
+  };
+
+  // 24小时设备状态数据
+  const onDeviceOperations = (record: any) => {
+    queryDeviceOperationsData({ device_id: record.device_code }).then((res) => {
+      if (res && res.code === 0) {
+        const list = res.data.list || [];
+        const result = list.reduce(
+          (acc: Record<string, Record<string, any>>, { label, value, time }: any) => {
+            if (!acc[time]) {
+              // 如果不存在，则初始化一个新对象
+              acc[time] = {};
+            }
+
+            // 将当前的 label 和 value 添加到对应的时间对象中
+            acc[time][label] = value;
+
+            return acc;
+          },
+          {},
+        );
+
+        const finalResult: any = Object.entries(result).map(([time, values]: any) => ({
+          time,
+          ...values,
+        }));
+
+        setStatusData(finalResult);
+        setStatusVisible(true);
+      }
+    });
+  };
+
+  // 24小时设备状态数据回调
+  const onStatusCallback = () => {
+    setStatusVisible(false);
+  };
+
+  //  搜索
+  const onFinish = () => {
+    form.validateFields().then((data) => {
+      setLoading(true);
+      setSearchData(data);
+    });
+  };
+  // 重置
+  const onReset = () => {
+    form.resetFields();
+    setLoading(true);
+    setSearchData(null);
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, _row: any, index: number) => index + 1,
+    },
+    {
+      title: '家名称',
+      dataIndex: 'home_name',
+      key: 'home_name',
+    },
+    {
+      title: '用户名',
+      dataIndex: 'user_name',
+      key: 'user_name',
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'device_code',
+      key: 'device_code',
+    },
+    {
+      title: '是否在线',
+      dataIndex: 'is_online',
+      key: 'is_online',
+      render: (_, record: any) => {
+        return (
+          <span style={{ color: record.is_online ? 'green' : 'red' }}>
+            {record.is_online ? '在线' : '离线'}
+          </span>
+        );
+      },
+    },
+    {
+      title: '当前开关状态',
+      dataIndex: 'power',
+      key: 'power',
+      render: (_, record: any) => {
+        return (
+          <span style={{ color: `${{ 0: 'red', 1: 'green' }[record.power]}` }}>
+            {{ 0: '关', 1: '开' }[record.power]}
+          </span>
+        );
+      },
+    },
+    {
+      title: '当前模式',
+      dataIndex: 'mode',
+      key: 'mode',
+      render: (_, record: any) => {
+        return (
+          <span>{{ 0: '制冷', 1: '制热', 2: '除湿', 3: '送风', 4: '加湿' }[record.mode]}</span>
+        );
+      },
+    },
+    {
+      title: '风速',
+      dataIndex: 'speed',
+      key: 'speed',
+      render: (_, record: any) => {
+        return (
+          <span>{{ 1: '一档', 2: '二档', 3: '三挡', 4: '四挡', 5: '五档' }[record.speed]}</span>
+        );
+      },
+    },
+    {
+      title: '设定温度',
+      dataIndex: 'set_temp',
+      key: 'set_temp',
+      render: (_, record: any) => {
+        return `${record.set_temp}℃`;
+      },
+    },
+    {
+      title: '温度',
+      dataIndex: 'temperature',
+      key: 'temperature',
+      render: (_, record: any) => {
+        return `${record.set_temp}℃`;
+      },
+    },
+    {
+      title: '湿度',
+      dataIndex: 'humidity',
+      key: 'humidity',
+    },
+    {
+      title: '电压值',
+      dataIndex: 'fan_voltage',
+      key: 'fan_voltage',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              onHistory(record);
+            }}
+          >
+            设备运行历史
+          </a>
+          <a
+            onClick={() => {
+              onDeviceOperations(record);
+            }}
+          >
+            24小时设备状态数据
+          </a>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ background: '#fff' }}>
+        <Form form={form} layout="inline" onFinish={onFinish} style={{ padding: '20px' }}>
+          <Form.Item name="home_name" label="家名称">
+            <Input placeholder="请输入家名称" />
+          </Form.Item>
+          <Form.Item name="user_name" label="用户名">
+            <Input placeholder="请输入用户名" />
+          </Form.Item>
+          <Form.Item name="device_id" label="设备编号	">
+            <Input placeholder="请输入设备编号" />
+          </Form.Item>
+          <Form.Item style={{ marginBottom: '10px' }}>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                <SearchOutlined />
+                查询
+              </Button>
+              <Button htmlType="button" onClick={onReset}>
+                <ReloadOutlined />
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+        <Table
+          columns={columns}
+          dataSource={dataList}
+          rowKey={(record) => record.record_id}
+          pagination={pagination}
+          loading={loading}
+          onChange={tableChange}
+        />
+        {historyVisible && (
+          <DeviceHistory
+            visible={historyVisible}
+            params={historyData}
+            editCallback={onHistoryCallback}
+          />
+        )}
+        {statusVisible && (
+          <DeviceStatusData
+            params={statusData}
+            visible={statusVisible}
+            editCallback={onStatusCallback}
+          />
+        )}
+      </div>
+    </PageContainer>
+  );
+};
+export default BannerManagement;

src/pages/BannerManagement/index.tsx

@@ -56,12 +56,12 @@ const BannerManagement: React.FC = () => {
   }, [searchData]);
 
   // 分页切换
-  const tableChange = () => {
+  const tableChange = (page: any) => {
     setLoading(true);
     const params = {
       q: 'page',
-      current: pagination.current,
-      pageSize: pagination.pageSize,
+      current: page.current,
+      pageSize: page.pageSize,
       ...searchData,
     };
     queryBanner(params).then((res) => {

src/pages/DataBoard/index.tsx

@@ -543,7 +543,6 @@ const DataBoard: React.FC = () => {
           {homeInfo && homeInfo.length ? (
             <Slider {...settings} className="swiper-container">
               {homeInfo.map((res) => {
-                console.log(res);
                 return (
                   <Suspense key={res} fallback={<div>loading</div>}>
                     <SliderData key={res} data={res} />

src/services/afterSales.ts

@@ -0,0 +1,26 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 查询售后管理列表
+ * @param param
+ */
+export async function queryDeviceOperations(param: object) {
+  return request(`/web/v1/device_operations?${stringify(param)}`);
+}
+
+/**
+ * 查询设备运行历史
+ * @param param
+ */
+export async function queryDeviceRunState(param: object) {
+  return request(`/web/v1/device_run_state?${stringify(param)}`);
+}
+
+/**
+ * 查询24小时设备状态数据
+ * @param param
+ */
+export async function queryDeviceOperationsData(param: object) {
+  return request(`/web/v1/device_operations/data?${stringify(param)}`);
+}