win-chart 1.0.0

package/src/components/win-card-mobile/components/IndicatorInfo.tsx

@@ -0,0 +1,83 @@
+import { IStyleProps } from '@/types';
+import { ReactNode } from 'react';
+import { css, styled } from 'styled-components';
+import { UnitWrapper } from 'src/components/win-wrappers/card-wrapper';
+import { useHalfScreenDispatch } from '@/hooks/useHalfScreenState';
+
+interface IProps extends IStyleProps {
+  label: string;
+  value: ReactNode;
+  unit: string;
+  extraLabel?: string;
+  extraValue?: ReactNode;
+  extraValueColor?: string;
+  jumpUrl?: string;
+}
+
+export const IndicatorInfo = ({
+  label,
+  value,
+  unit,
+  extraLabel,
+  extraValue,
+  extraValueColor,
+  jumpUrl,
+  ...args
+}: Partial<IProps>) => {
+  const halfScreenDispatch = useHalfScreenDispatch();
+
+  return (
+    <div {...args}>
+      <LabelWrapper>
+        <div
+          data-value
+          onClick={() => {
+            halfScreenDispatch.setState({
+              show: true,
+              src: jumpUrl,
+              title: '指标详情',
+            });
+          }}
+          style={{
+            ...(!!jumpUrl && {
+              cursor: 'pointer',
+            }),
+          }}
+        >
+          {value}
+        </div>
+        {!!unit && <UnitWrapper>({unit})</UnitWrapper>}
+      </LabelWrapper>
+    </div>
+  );
+};
+
+const LabelWrapper = styled.div<{ unit?: string }>`
+  line-height: 1;
+  margin-bottom: 0.08rem;
+
+  [data-label] {
+    width: 106px;
+    font-size: 0.32rem;
+    font-weight: 600;
+    margin-bottom: 0.08rem;
+    display: flex;
+
+    ${(props) =>
+      !!props.unit &&
+      css`
+        &::after {
+          content: '(${props.unit})';
+          display: inline-block;
+          color: #6d7a90;
+        }
+      `}
+  }
+
+  [data-value] {
+    font-size: 0.56rem;
+    font-weight: 700;
+    color: #000;
+    margin-bottom: 0.08rem;
+  }
+`;

package/src/components/win-card-mobile/components/SelectDecoration.tsx

@@ -0,0 +1,28 @@
+import { IListItem } from '@/types';
+import { CnSelect } from '@cainiaofe/cn-ui-m';
+import { css, styled } from 'styled-components';
+
+export const IndicatorSelectDecoration = styled(CnSelect).attrs({
+  size: 'small',
+  showSearch: true,
+  style: {
+    width: '2rem',
+  },
+})<{ dataSource?: IListItem[]; $right?: boolean }>`
+  .cn-ui-m-selectdrawer-content {
+    padding-left: 0;
+    cursor: pointer;
+
+    div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ${(props) =>
+    props.$right &&
+    css`
+      transform: translateY(-0.08rem);
+    `}
+`;

package/src/components/win-card-mobile/index.tsx

@@ -0,0 +1,235 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { IIndicatorCardConfig } from '@/types';
+import { IndicatorArea } from './components/IndicatorArea';
+import { RequestWrapper } from '../win-wrappers/request-wrapper';
+import {
+  CardTitleWrapperMobile,
+  CardWrapperMobile,
+} from '../win-wrappers/card-wrapper';
+import { WinCardChartType } from 'src/types/enum';
+import { INDICATOR_CONFIG_BASE_URL } from '../../utils/const';
+import { Indicator } from './components/Indicator';
+import { CnBox } from '@cainiaofe/cn-ui';
+import { IndicatorSelectDecoration } from './components/SelectDecoration';
+import { getListLabel, unitList } from 'src/utils';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { HoverView } from '../hover-view';
+import { useCardOptionList } from 'src/hooks/useCardOptionList';
+import { VisionUserConfigContext } from '../VisionUserConfigContext';
+import { ChartContent } from './components/ChartContent';
+import { WinChartType } from 'src/components/win-chart';
+import { useInViewport } from 'ahooks';
+
+interface IProps {
+  id: number;
+  config?: IIndicatorCardConfig;
+}
+
+export const WidCardMobile = ({ id, config }: IProps) => {
+  if (config) {
+    return <ShowCard configData={config} />;
+  }
+
+  return (
+    <RequestWrapper
+      requestData={{ url: `${INDICATOR_CONFIG_BASE_URL}?id=${id}` }}
+      service={IndicatorService.getConfigInfo}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {(configData) => {
+        return <ShowCard configData={configData} />;
+      }}
+    </RequestWrapper>
+  );
+};
+
+const ShowCard = ({ configData }: { configData: IIndicatorCardConfig }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [inViewport] = useInViewport(ref);
+  const [shouldInit, setShouldInit] = useState(false);
+  const orgLevelList = useCardOptionList(
+    shouldInit && configData.commonConfig.orgLevel ? configData.id : undefined,
+  );
+  const [curOrgLevelValue, setCurOrgLevelValue] = useState<string>();
+  const isSingleIndicator = configData.chartType === WinCardChartType.INDICATOR;
+  const hasOrgLevel = !!configData.commonConfig.orgLevel;
+  const isCommonTitle = ![WinCardChartType.CUSTOM_CARD].includes(
+    configData.chartType,
+  );
+  const visionUserConfig = useContext(VisionUserConfigContext);
+  const hasInitOrgLevelRef = useRef(false);
+
+  useEffect(() => {
+    if (inViewport) {
+      setShouldInit(true);
+    }
+  }, [inViewport]);
+
+  useEffect(() => {
+    if (orgLevelList.length !== 0 && visionUserConfig) {
+      const configOrgLevelVal =
+        visionUserConfig[configData.commonConfig.orgLevel];
+      const valueInList = orgLevelList
+        .map((item) => item.value)
+        .includes(configOrgLevelVal);
+
+      if (!hasInitOrgLevelRef.current) {
+        // 第一次赋值
+        setCurOrgLevelValue(
+          valueInList ? configOrgLevelVal : orgLevelList[0].value,
+        );
+        hasInitOrgLevelRef.current = true;
+      } else {
+        // 用户配置切换赋值
+        if (valueInList) {
+          setCurOrgLevelValue(configOrgLevelVal);
+        }
+      }
+    }
+  }, [configData.commonConfig.orgLevel, orgLevelList, visionUserConfig]);
+
+  // 单位
+  const unit = getListLabel(unitList, configData.indicatorConfig[0]?.unit);
+
+  return (
+    <CardWrapperMobile ref={ref}>
+      <CnBox direction="row" justify="space-between">
+        {isCommonTitle ? (
+          <CardTitleWrapperMobile
+            data-card-id={configData.id}
+            style={{
+              maxWidth: isSingleIndicator || !hasOrgLevel ? '80%' : '45%',
+              position: 'relative',
+              ...([
+                WinCardChartType.INDICATOR,
+                WinCardChartType.INDICATOR_AREA,
+              ].includes(configData.chartType) && {
+                fontSize: '0.24rem',
+                fontWeight: 500,
+              }),
+            }}
+          >
+            <HoverView content={configData.name} />
+          </CardTitleWrapperMobile>
+        ) : (
+          <div />
+        )}
+        <CnBox spacing={16} direction="row" align="center">
+          {hasOrgLevel && !isSingleIndicator && (
+            <IndicatorSelectDecoration
+              $right
+              value={curOrgLevelValue}
+              dataSource={orgLevelList}
+              onChange={setCurOrgLevelValue}
+            />
+          )}
+        </CnBox>
+      </CnBox>
+      {getShowContent({
+        configData,
+        hasOrgLevel,
+        orgLevelVal: curOrgLevelValue,
+        unit,
+      })}
+      {isSingleIndicator && (
+        <div style={{ height: 32 }}>
+          {hasOrgLevel && (
+            <IndicatorSelectDecoration
+              value={curOrgLevelValue}
+              dataSource={orgLevelList}
+              onChange={setCurOrgLevelValue}
+            />
+          )}
+        </div>
+      )}
+    </CardWrapperMobile>
+  );
+};
+
+const getShowContent = ({
+  configData,
+  hasOrgLevel,
+  orgLevelVal,
+  unit,
+}: {
+  configData: IIndicatorCardConfig;
+  orgLevelVal?: string;
+  unit?: string;
+  hasOrgLevel: boolean;
+}) => {
+  const data = {
+    configData,
+    orgLevelVal,
+    unit,
+  };
+
+  if (hasOrgLevel && !orgLevelVal) {
+    return null;
+  }
+
+  switch (configData.chartType) {
+    case WinCardChartType.INDICATOR:
+      return <Indicator {...data} />;
+
+    case WinCardChartType.INDICATOR_AREA:
+      return <IndicatorArea {...data} />;
+
+    case WinCardChartType.DUAL_LINE_BAR_CHART:
+      return (
+        <ChartContent winChartType={WinChartType.DUAL_LINE_BAR} {...data} />
+      );
+
+    case WinCardChartType.AREA_CHART:
+      return <ChartContent winChartType={WinChartType.AREA} {...data} />;
+
+    case WinCardChartType.LINE_CHART:
+      return <ChartContent winChartType={WinChartType.LINE} {...data} />;
+
+    case WinCardChartType.COLUMN_CHART:
+      return <ChartContent winChartType={WinChartType.COLUMN} {...data} />;
+
+    case WinCardChartType.STACK_COLUMN_CHART:
+      return (
+        <ChartContent winChartType={WinChartType.STACK_COLUMN} {...data} />
+      );
+
+    case WinCardChartType.FUNNEL_CHART:
+      return <ChartContent winChartType={WinChartType.FUNNEL} {...data} />;
+
+    case WinCardChartType.BAR_CHART:
+      return <ChartContent winChartType={WinChartType.BAR} {...data} />;
+
+    case WinCardChartType.PIE_CHART:
+      return <ChartContent winChartType={WinChartType.PIE} {...data} />;
+
+    case WinCardChartType.PIE_CHART_RESERVE:
+      return (
+        <ChartContent
+          reserveValueWithLabelType
+          winChartType={WinChartType.PIE}
+          {...data}
+        />
+      );
+
+    case WinCardChartType.RADAR_CHART:
+      return <ChartContent winChartType={WinChartType.RADAR} {...data} />;
+
+    case WinCardChartType.RADAR_CHART_RESERVE:
+      return (
+        <ChartContent
+          reserveValueWithLabelType
+          winChartType={WinChartType.RADAR}
+          {...data}
+        />
+      );
+
+    case WinCardChartType.CYCLE_CHART:
+      return <ChartContent winChartType={WinChartType.CYCLE} {...data} />;
+
+    default:
+      return undefined;
+  }
+};

package/src/components/win-card-mobile/utils/interface.ts

@@ -0,0 +1,12 @@
+import { IIndicatorCardConfig } from '@/types';
+import { CSSProperties } from 'react';
+
+export interface IContentProps {
+  configData: IIndicatorCardConfig;
+  theme?: string;
+  orgLevelVal?: string;
+  unit?: string;
+  extraCondition?: {
+    [p: string]: string;
+  };
+}

package/src/components/win-card-mobile/utils/tool.ts

@@ -0,0 +1,9 @@
+export const getExtraLabel = (subTitle?: number) => {
+  switch (subTitle) {
+    case 1:
+      return '目标';
+
+    default:
+      return undefined;
+  }
+};

package/src/components/win-chart/components/chart-wrapper.tsx

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const ChartWrapper = styled.div`
+  height: 100%;
+`;

package/src/components/win-chart/index.tsx

@@ -0,0 +1,59 @@
+import { ChartWrapper } from './components/chart-wrapper';
+import { IWinChartProps } from './utils/type';
+import { useRef, useEffect, useState } from 'react';
+import { getEChartOptions } from './utils/getChartOptions';
+import * as echarts from 'echarts';
+import { commonOpt } from './utils/const';
+import { debounce } from './utils/tool';
+import light from './theme/win-light.json';
+import dark from './theme/win-dark.json';
+import deepMerge from 'deepmerge';
+
+export * from './utils/const';
+export * from './utils/type';
+
+echarts.registerTheme('light', deepMerge(light, commonOpt));
+echarts.registerTheme('dark', deepMerge(dark, commonOpt));
+
+export const WinChart = ({
+  className,
+  style,
+  extraOption,
+  theme = 'light',
+  ...args
+}: IWinChartProps) => {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [eChart, setEChart] = useState<echarts.ECharts>();
+  const argsStr = JSON.stringify(args);
+  const extraOptionStr = JSON.stringify(extraOption ?? {});
+
+  // 生成实例
+  useEffect(() => {
+    const eChart = echarts.init(boxRef.current, theme);
+    setEChart(eChart);
+
+    // 监听窗口变化
+    const resize = debounce(eChart.resize, 500);
+    globalThis.addEventListener('resize', () => {
+      resize();
+    });
+  }, [theme]);
+
+  // 设置配置
+  useEffect(() => {
+    if (eChart) {
+      eChart.setOption(
+        deepMerge(
+          getEChartOptions(JSON.parse(argsStr)),
+          JSON.parse(extraOptionStr),
+        ),
+      );
+
+      setTimeout(() => {
+        eChart.resize();
+      }, 500);
+    }
+  }, [argsStr, eChart, extraOptionStr]);
+
+  return <ChartWrapper ref={boxRef} className={className} style={style} />;
+};