win-chart 1.0.0

package/src/components/win-wrappers/dot-wrapper.tsx

@@ -0,0 +1,18 @@
+import { rgba } from 'polished';
+import { css, styled } from 'styled-components';
+
+export const DotWrapper = styled.span<{ checked?: boolean }>`
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 500px;
+  background-color: ${rgba('#828c9e', 0.5)};
+  transform: translateY(32px);
+
+  ${({ checked }) =>
+    checked &&
+    css`
+      width: 18px;
+      background-color: #828c9e;
+    `}
+`;

package/src/components/win-wrappers/iframe-wrapper.tsx

@@ -0,0 +1,7 @@
+import { styled } from 'styled-components';
+
+export const IFrameWrapper = styled.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+`;

package/src/components/win-wrappers/request-wrapper.tsx

@@ -0,0 +1,190 @@
+import { useHasIntersected } from '@/hooks/useHasIntersected';
+import { IStyleProps } from '@/types';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { withoutAccessErrorCodeList } from 'src/api/request';
+import { styled } from 'styled-components';
+
+enum DataType {
+  NONE,
+  SUCCESS,
+  ERROR,
+  NO_ACCESS,
+  NO_DATA,
+}
+
+interface IProps<T, L> extends IStyleProps {
+  initData?: boolean;
+
+  /**
+   * 返回默认值
+   */
+  defaultValue?: T;
+
+  /**
+   * 请求参数
+   */
+  requestData?: L;
+
+  /**
+   * 获取数据异步函数
+   * @param data
+   * @param isInside
+   * @returns
+   */
+  service: (data?: L, isInside?: boolean) => Promise<T>;
+
+  /**
+   * 页面渲染回调
+   * @param data
+   * @returns
+   */
+  children: (data: T) => ReactNode;
+
+  /**
+   * 错误提示高度
+   */
+  errorBoxHeight?: number | string;
+
+  /**
+   *
+   */
+  debounceWait?: number;
+
+  /**
+   * 是否是内部员工登陆
+   */
+  isInside?: boolean;
+
+  noEmptyBox?: boolean;
+}
+
+export function RequestWrapper<T, L>({
+  initData = true,
+  defaultValue,
+  requestData,
+  service,
+  children,
+  errorBoxHeight,
+  debounceWait,
+  isInside,
+  noEmptyBox,
+  ...args
+}: IProps<T, L>) {
+  const [dataType, setDataType] = useState(DataType.NONE);
+  const [data, setData] = useState(defaultValue);
+  const requestDataStr = JSON.stringify(requestData);
+  const ref = useRef<HTMLDivElement>(null);
+  const shouldInit = useHasIntersected(ref);
+
+  const handleGetData = useCallback(async () => {
+    try {
+      setDataType(DataType.NONE);
+      setData(
+        await service(
+          {
+            ...requestData,
+            requestId: undefined,
+          } as L,
+          isInside,
+        ),
+      );
+      setDataType(DataType.SUCCESS);
+    } catch (error) {
+      if (withoutAccessErrorCodeList.includes(error.errorCode)) {
+        // 无权限
+        setDataType(DataType.NO_ACCESS);
+      } else {
+        setDataType(DataType.ERROR);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requestDataStr]);
+
+  useEffect(() => {
+    if (shouldInit && initData) {
+      handleGetData();
+    }
+  }, [shouldInit, initData, handleGetData]);
+
+  const { img, remark, btn } = dataTypeMap.get(dataType) ?? {};
+
+  return (
+    <DataBoxWrapper ref={ref} {...args}>
+      {dataType === DataType.SUCCESS && !!data && children(data)}
+      {!noEmptyBox &&
+        [DataType.ERROR, DataType.NO_ACCESS, DataType.NO_ACCESS].includes(
+          dataType,
+        ) && (
+          <EmptyBox style={{ height: errorBoxHeight }}>
+            <img data-img src={img} alt="" />
+            <div data-msg>
+              <span data-remark>{remark}</span>
+              <span data-btn onClick={handleGetData}>
+                {btn}
+              </span>
+            </div>
+          </EmptyBox>
+        )}
+    </DataBoxWrapper>
+  );
+}
+
+const DataBoxWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const EmptyBox = styled.div`
+  width: 100%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+
+  [data-img] {
+    width: 100%;
+    height: 50%;
+    margin-bottom: 12px;
+    object-fit: contain;
+  }
+
+  [data-msg] {
+    font-size: 12px;
+    line-height: 1;
+
+    [data-remark] {
+      color: #6d7a90;
+      margin-right: 8px;
+    }
+
+    [data-btn] {
+      color: #3379ff;
+      cursor: pointer;
+    }
+  }
+`;
+
+const dataTypeMap = new Map<
+  DataType,
+  { img?: string; remark?: string; btn?: string }
+>()
+  .set(DataType.ERROR, {
+    img: 'https://img.alicdn.com/imgextra/i4/O1CN01vg4MQE1e6WfWTdtx4_!!6000000003822-55-tps-190-120.svg',
+    remark: '数据加载失败',
+    btn: '刷新一下～',
+  })
+  .set(DataType.NO_ACCESS, {
+    img: 'https://img.alicdn.com/imgextra/i1/O1CN01Iz7oDf1IqrBik7NYy_!!6000000000945-55-tps-190-120.svg',
+    remark: '你暂无权限',
+    btn: '',
+  })
+  .set(DataType.NO_DATA, {
+    img: 'https://img.alicdn.com/imgextra/i4/O1CN01g0QafV1rIyRHX6HA9_!!6000000005609-55-tps-190-120.svg',
+    remark: '暂无数据',
+    btn: '',
+  });

package/src/global.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.styl' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '@alife/dwork-cnstr-header';
+
+interface Window {
+  MENU_LOAD: string;
+  MY_VISION_MENU_URL: string;
+
+  openHelpDrawer?: () => void;
+
+  vConsole: VConsole;
+
+  nextConePages: {
+    activePath: string;
+    title: string;
+    url: string[];
+  }[];
+}
+
+module '@alife/micro-stark' {
+  export const isInIcestark: () => boolean;
+  export const getMountNode: () => Element;
+  export const registerAppEnter: (cb: () => unknown) => unknown;
+  export const registerAppLeave: (cb: () => unknown) => unknown;
+  export const getBasename: () => string;
+}
+
+declare module 'react/jsx-runtime';

package/src/hooks/useCardOptionList.ts

@@ -0,0 +1,23 @@
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+import { CardService } from 'src/services/CardService';
+
+export const useCardOptionList = (id?: number) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (id) {
+          const data = await CardService.queryOptionList(id);
+          setState(data);
+        }
+      } catch (error) {
+        CnMessage(error.message);
+      }
+    })();
+  }, [id]);
+
+  return state;
+};

package/src/hooks/useCostFiltersDicList.ts

@@ -0,0 +1,22 @@
+import { CostService } from '@/services/CostService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useCostFiltersDicList = (name: string, isInside = false) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      if (name) {
+        try {
+          setState(await CostService.getDicList(name, isInside));
+        } catch (error) {
+          CnMessage.error(error.message);
+        }
+      }
+    })();
+  }, [isInside, name]);
+
+  return state;
+};

package/src/hooks/useFbiUrl.ts

@@ -0,0 +1,22 @@
+import { CommonService } from '@/services/CommonService';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useFbiUrl = (id?: string | number) => {
+  const [state, setState] = useState<string>();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (id) {
+          const data = await CommonService.getFbiUrl(id);
+          setState(data);
+        }
+      } catch (error) {
+        CnMessage.error(error.message);
+      }
+    })();
+  }, [id]);
+
+  return state;
+};

package/src/hooks/useHalfScreenState.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { atom, useRecoilValue, useSetRecoilState } from 'recoil';
+
+const halfScreenState = atom<{
+  show: boolean;
+  src?: string;
+  title?: string;
+}>({
+  key: 'half-screen-state',
+  default: {
+    show: false,
+  },
+});
+
+export const useHalfScreenStateValue = () => useRecoilValue(halfScreenState);
+export const useSetHalfScreenState = () => useSetRecoilState(halfScreenState);
+
+export const useHalfScreenDispatch = () => {
+  const setState = useSetRecoilState(halfScreenState);
+
+  return {
+    setState,
+    close: () => {
+      setState(() => ({
+        src: undefined,
+        title: undefined,
+        show: false,
+      }));
+    },
+  };
+};
+
+export const useAutoCloseHalfScreen = () => {
+  const setState = useSetRecoilState(halfScreenState);
+  const location = useLocation();
+  const refreshRef = useRef(false);
+
+  useEffect(() => {
+    if (refreshRef.current) {
+      setState(() => ({
+        src: undefined,
+        title: undefined,
+        show: false,
+      }));
+    }
+
+    refreshRef.current = true;
+  }, [location, setState]);
+};

package/src/hooks/useHasIntersected.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, RefObject } from 'react';
+
+/**
+ * 元素是否进入视口过
+ * @param ref
+ * @param options
+ * @returns
+ */
+export const useHasIntersected = <T extends Element>(
+  ref: RefObject<T>, // 接受外部传入的 ref
+  options?: IntersectionObserverInit,
+): boolean => {
+  const [hasIntersected, setHasIntersected] = useState(false);
+
+  useEffect(() => {
+    // 确保传入的 ref.current 不为空
+    if (ref.current) {
+      const observer = new IntersectionObserver((entries) => {
+        // 当元素进入视口时，更新状态
+        if (entries[0].isIntersecting) {
+          setHasIntersected(true);
+          // 如果只想监听一次，可以在这里取消观察
+          observer.unobserve(ref.current!);
+        }
+      }, options);
+
+      observer.observe(ref.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref, options]);
+
+  return hasIntersected;
+};

package/src/hooks/useIndicatorCardInfo.ts

@@ -0,0 +1,26 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { IIndicatorCardConfig } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+import { INDICATOR_CONFIG_BASE_URL } from 'src/utils';
+
+export const useIndicatorCardInfo = (id?: number) => {
+  const [state, setState] = useState<Partial<IIndicatorCardConfig>>({});
+
+  useEffect(() => {
+    (async () => {
+      if (id) {
+        try {
+          const data = await IndicatorService.getConfigInfo({
+            url: `${INDICATOR_CONFIG_BASE_URL}?id=${id}`,
+          });
+          setState(data);
+        } catch (error) {
+          CnMessage(error.message);
+        }
+      }
+    })();
+  }, [id]);
+
+  return state;
+};

package/src/hooks/useIndicatorCardQueryList.ts

@@ -0,0 +1,22 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorCardQueryList = (id?: number | string) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      if (id) {
+        try {
+          setState(await IndicatorService.getCardQueryList(id));
+        } catch (error) {
+          CnMessage.error(error.message);
+        }
+      }
+    })();
+  }, [id]);
+
+  return state;
+};

package/src/hooks/useIndicatorClassifyList.ts

@@ -0,0 +1,25 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorClassifyList = (isFirstLevel?: boolean) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const data = await IndicatorService.getClassifyList();
+        setState(
+          isFirstLevel
+            ? data.map((item) => ({ label: item.label, value: item.value }))
+            : data,
+        );
+      } catch (error) {
+        CnMessage(error.message);
+      }
+    })();
+  }, [isFirstLevel]);
+
+  return state;
+};

package/src/hooks/useIndicatorDetailsDateList.ts

@@ -0,0 +1,22 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorDetailsDateList = (id?: number | string) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      if (id) {
+        try {
+          setState(await IndicatorService.getDateList(id));
+        } catch (error) {
+          CnMessage.error(error.message);
+        }
+      }
+    })();
+  }, [id]);
+
+  return state;
+};

package/src/hooks/useIndicatorDetailsInfo.ts

@@ -0,0 +1,49 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IIndicatorDetailsInfo, IIndicatorInfoQuery } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorDetailsInfo = ({
+  subId,
+  name,
+  type,
+  indicatorDate,
+  originId,
+}: IIndicatorInfoQuery) => {
+  const [state, setState] = useState<Partial<IIndicatorDetailsInfo>>({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (subId && indicatorDate) {
+        try {
+          setLoading(true);
+          if (name && type) {
+            setState(
+              await IndicatorService.getDownDetails({
+                originId,
+                subId,
+                name,
+                type,
+                indicatorDate,
+              }),
+            );
+          } else {
+            setState(
+              await IndicatorService.getDetails({
+                subId,
+                indicatorDate,
+              }),
+            );
+          }
+        } catch (error) {
+          CnMessage.error(error.message);
+        } finally {
+          setLoading(false);
+        }
+      }
+    })();
+  }, [subId, name, type, indicatorDate, originId]);
+
+  return { data: state, loading };
+};

package/src/hooks/useIndicatorDetailsTrend.ts

@@ -0,0 +1,25 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorDetailsTrend = (
+  id?: string | number,
+  name?: string,
+) => {
+  const [state, setState] = useState<IListItem<number>[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      if (id && name) {
+        try {
+          setState(await IndicatorService.getDetailsTrend(id, name));
+        } catch (error) {
+          CnMessage.error(error.message);
+        }
+      }
+    })();
+  }, [id, name]);
+
+  return state;
+};

package/src/hooks/useIndicatorDicList.ts

@@ -0,0 +1,22 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorDicList = (name: string) => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      if (name) {
+        try {
+          setState(await IndicatorService.getDicList(name));
+        } catch (error) {
+          CnMessage.error(error.message);
+        }
+      }
+    })();
+  }, [name]);
+
+  return state;
+};

package/src/hooks/useIndicatorLabelList.ts

@@ -0,0 +1,20 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorLabelList = () => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setState(await IndicatorService.getLabelList());
+      } catch (error) {
+        CnMessage.error(error.message);
+      }
+    })();
+  }, []);
+
+  return state;
+};

package/src/hooks/useIndicatorList.ts

@@ -0,0 +1,24 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorList = (timeSpan?: string, orgLevel?: string) => {
+  const [state, setState] = useState<IListItem<number>[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const data = await IndicatorService.queryIndicatorList(
+          timeSpan,
+          orgLevel,
+        );
+        setState(data);
+      } catch (error) {
+        CnMessage(error.message);
+      }
+    })();
+  }, [orgLevel, timeSpan]);
+
+  return state;
+};

package/src/hooks/useIndicatorRangeList.ts

@@ -0,0 +1,20 @@
+import { IndicatorService } from '@/services/IndicatorService';
+import { IListItem } from '@/types';
+import { CnMessage } from '@cainiaofe/cn-ui';
+import { useEffect, useState } from 'react';
+
+export const useIndicatorRangeList = () => {
+  const [state, setState] = useState<IListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setState(await IndicatorService.getRangeList());
+      } catch (error) {
+        CnMessage.error(error.message);
+      }
+    })();
+  }, []);
+
+  return state;
+};