本文档面向已经了解 面板小程序开发 的开发者，您需要充分的了解什么是面板小程序，什么是 DP 功能。

相关知识

• 面板小程序
• 名词解释

在某些设备的面板中需要提供给 C 端用户查看设备数据的能力，并需要导出数据使用户能够进一步分析。这里一般会导出如：温度、湿度、PM2.5 等的数据，涂鸦提供了相关的接口，可以按小时、天、月等粒度导出数据，把数据生成 Excel 文件，并通过邮件的方式发送给用户。

按小时粒度导出数据接口

• api: exportStatisticsHour
• 说明: 可选择某一天中 24 小时的数据

入参

按天粒度导出数据接口

• api: exportStatisticsDay
• 说明: 可选择一个日期范围内每天的统计数据，日期范围不能超过 1 年

入参

按月粒度导出数据接口

• api: exportStatisticsMonth
• 说明: 可选择一个日期范围内每月的统计数据，日期范围不能超过 1 年

入参

dpExcelQuery 的结构

此值为一个数组结构的 JSON 字符串，数组元素的结构为：

示例

[{"dpId":"101","name":"华氏度转摄氏度","handler":"temperatureF2C"}]
        

示例为：需要导出设备的温度 (101)、湿度 (102)两个 DP 的数据，并且需要支持将温度的单位转为华氏度。

功能描述

• 温度 DP 默认为摄氏度单位，交互上支持用户可选择将摄氏度转华氏度；
• 支持可选择导出数据的粒度：时、天、月；
• 支持可选择导出的时间范围，注意选择导出时粒度时，只能选择一个日期；
• 提供输入电子邮箱地址的功能；

UI 实现

import React, { FC, useState, useCallback, useRef } from
          "react";
          import { View, Text, Button, Checkbox, showToast } from "@ray-js/ray";
          import SwitchButton from "@ray-js/components-ty-switch";
          import ActionSheet from "@ray-js/components-ty-actionsheet";
          import List from "@ray-js/components-ty-cell";
          import DatePicker from "@ray/components-ty-datetime-picker";
          import Input from "@ray-js/components-ty-input";
          import { hooks } from "@ray-js/panel-sdk";
          import * as api from "./api";

          const langs = {
          hour: "时",
          day: "天",
          month: "月",
          };

          const exportFn = {
          hour: api.exportHour,
          day: api.exportDay,
          month: api.exportMonth,
          };

          const formDate = (date, format = "YYYYMMDD") => {
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();

          return format
          .replace("YYYY", year)
          .replace("MM", month.toString().padStart(2, "0"))
          .replace("DD", day.toString().padStart(2, "0"));
          };

          const Page: FC = () => {
          const devInfo = hooks.useDevInfo();
          const [unit, setUnit] = useState(false);
          const [type, setType] = useState("hour");
          const [email, setEmail] = useState("");
          const isEnd = useRef(false);
          const [showList, setShowList] = useState(false);
          const [showTime, setShowTime] = useState(false);
          const [startTime, setStartTime] = useState(new Date());
          const [endTime, setEndTime] = useState(new Date());

          const handleShowEnd = useCallback(() => {
          isEnd.current = true;
          setShowTime(true);
          }, []);
          const handleShowStart = useCallback(() => {
          isEnd.current = false;
          setShowTime(true);
          }, []);
          const handleSelectTime = useCallback((v) => {
          if (isEnd.current) {
          setEndTime(v);
          } else {
          setStartTime(v);
          }
          }, []);

          const handleExport = useCallback(() => {
          if (!email) {
          showToast({
          title: "请输入邮箱",
          icon: "error",
          });
          return;
          }
          const format = type === "month" ? "YYYYMM" : "YYYYMMDD";
          let start = formDate(startTime, format);
          let end = formDate(startTime, format);
          const data = {
          title: "温湿度数据表",
          devId: devInfo.devId,
          email,
          dpExcelQuery: [
          {
          dpId: "101",
          name: "室内温度",
          handler: unit ? "temperatureC2F" : undefined,
          },
          { dpId: "102", name: "室内湿度" },
          ],
          };

          switch (type) {
          case "hour":
          data.date = start;
          break;
          case "day":
          data.startDay = start;
          data.endDay = end;
          break;
          case "month":
          data.startMonth = start;
          data.endMonth = end;
          break;
          }
          exportFn[type](data);
          }, [type, email, unit, startTime, endTime, devInfo?.devId]);

          return (
          <View>
          <List>
          <List.Item
          title="使用华氏度"
          content={<SwitchButton checked={unit} onChange={(v) => setUnit(v)} />}
          />
          <List.Item
          title="粒度"
          onClick={() => setShowList(true)}
          content={<Text>{langs[type]}</Text>}
          />
          <List.Item
          title={type === "hour" ? "时间" : "开始时间"}
          onClick={handleShowStart}
          content={
          <Text>
          {formDate(startTime, type === "month" ? "YYYYMM" : "YYYYMMDD")}
          </Text>
          }
          />
          {type !== "hour" && (
          <List.Item
          title="结束时间"
          onClick={handleShowEnd}
          content={
          <Text>
          {formDate(endTime, type === "month" ? "YYYYMM" : "YYYYMMDD")}
          </Text>
          }
          />
          )}

          <List.Item
          title="邮箱"
          content={
          <Input
          placeholder="请输入"
          value={email}
          onInput={(e) => setEmail(e.value)}
          />
          }
          />
          </List>
          <ActionSheet
          show={showList}
          header="选择粒度"
          onCancel={() => setShowList(false)}
          okText=""
          >
          <List.Row
          dataSource={Object.keys(langs).map((key) => {
          return {
          title: langs[key],
          content: type === key ? <Checkbox checked /> : null,
          onClick: () => {
          setType(key);
          setShowList(false);
          },
          };
          })}
          />
          </ActionSheet>
          <ActionSheet
          show={showTime}
          header="选择时间"
          onCancel={() => setShowTime(false)}
          onOk={() => setShowTime(false)}
          >
          <DatePicker
          onChange={handleSelectTime}
          type={type === "month" ? "year-month" : "date"}
          />
          </ActionSheet>
          <Button onClick={handleExport}>导出</Button>
          </View>
          );
          };

          export default Page;
        

API 封装

api.js 文件内容

import {
          exportStatisticsDay,
          exportStatisticsHour,
          exportStatisticsMonth,
          } from "@ray-js/ray";

          // 导出小时数据
          export const exportHour = async (params) => {
          try {
          await exportStatisticsHour({
          email: params.email,
          devId: params.devId,
          dpExcelQuery: JSON.stringify(params.dpExcelQuery),
          date: params.date,
          type: "avg",
          auto: 2,
          keepScalaPoint: true,
          lang: "cn",
          });

          // 导出成功
          } catch {
          // 导出失败
          }
          };

          // 导出天数据
          export const exportDay = async (params) => {
          try {
          await exportStatisticsDay({
          email: params.email,
          devId: params.devId,
          dpExcelQuery: JSON.stringify(params.dpExcelQuery),
          startDay: params.startDay,
          endDay: params.endDay,
          type: "avg",
          keepScalaPoint: true,
          lang: "cn",
          });

          // 导出成功
          } catch {
          // 导出失败
          }
          };

          // 导出月数据
          export const exportMonth = async (params) => {
          try {
          await exportStatisticsMonth({
          email: params.email,
          devId: params.devId,
          dpExcelQuery: JSON.stringify(params.dpExcelQuery),
          startMonth: params.startMonth,
          endMonth: params.endMonth,
          type: "avg",
          keepScalaPoint: true,
          lang: "cn",
          });

          // 导出成功
          } catch {
          // 导出失败
          }
          };
        

• 恭喜你 🎉 完成了本教程的学习！
• 有任何问题可以联系 Tuya MiniApp Team