ttk-app-core/src/apps/app-demo/home/home-condition/app.js

@ttk/recat enterprise develop framework

import React, { useEffect } from "react";
import { useAppData, useData, useActions, useCommit } from "@ttk/app-loader";
import { Card, Button, Carousel, Select, Icon, Skeleton } from "antd";
import "./style.less";
import "../index.less";
import TableCom from "./components/TableCom";
import EchartCom from "./components/EchartCom";
export default React.memo(Page);
function Page(props) {
  // 在当前app获取其它app的state
  // const appData = useAppData('app-root')
  // const dateRange = useAppData('app-root/dateRange')

  // 获取当前app的state
  // useData([props, '...', '...'])
  const commit = useCommit();
  const actions = useActions(props);
  const { showTable } = useData([props, "showTable"]).toJS();
  const cardShow = useAppData("home/cardShow").toJS();
  var cardItem = cardShow.find((item, index) => {
    return item.cardName === props.appName;
  });
  var cardWidth = cardItem.cardWidth;
  var display = cardItem.display;
  const { loading } = useData([props, "showState"]).toJS();
  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
    async function fetchData() {
      await actions.getConditionData();
    }
    fetchData();
  }, []);
  function toEchart() {
    commit([props, "showTable"], false);
  }
  function toTable() {
    commit([props, "showTable"], true);
  }
  function reload() {
    actions.getConditionData();
  }
  function toBig() {
    var newCardWidth = "100%";
    cardItem.cardWidth = newCardWidth;
    commit("home/cardShow", { type: "big", data: cardItem });
  }
  function toSmall() {
    var resetCardWidth = "49%";
    cardItem.cardWidth = resetCardWidth;
    commit("home/cardShow", { type: "small", data: cardItem });
  }
  return (
    <Card
      className="home-card"
      bordered={false}
      style={{ width: cardWidth, display: display }}
    >
      <Skeleton loading={loading}>
        <div className="home-card-title">
          <div>
            <span>经营状况</span>
          </div>
          <div>
            <Button
              icon="bar-chart"
              className="chart-button"
              onClick={toEchart}
            />
            <Button
              icon="menu-unfold"
              className="menu-button"
              onClick={toTable}
            />
            <Button icon="reload" className="reload-button" onClick={reload} />
            {cardWidth === "49%" ? (
              <Button
                icon="arrows-alt"
                className="arrows-button"
                onClick={toBig}
              />
            ) : (
              <Button
                icon="shrink"
                className="arrows-button"
                onClick={toSmall}
              />
            )}
          </div>
        </div>
        {showTable === false ? (
          <div>
            <EchartCom {...props} />
          </div>
        ) : (
          <div>
            <TableCom {...props} />
          </div>
        )}
      </Skeleton>
    </Card>
  );
}