win-chart 1.0.0

package/src/components/win-card/components/WinRankContent.tsx

@@ -0,0 +1,102 @@
+import { CnBox } from '@cainiaofe/cn-ui';
+import { Fragment } from 'react';
+import { HoverView } from 'src/components/hover-view';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { WorkbenchService } from 'src/services/WorkbenchService';
+import { styled } from 'styled-components';
+
+export const WinRankContent = () => {
+  return (
+    <RequestWrapper service={WorkbenchService.queryWinRankList}>
+      {(data) => {
+        return (
+          <Wrapper>
+            {data.map((item, index) => (
+              <div key={item.title}>
+                <div data-title>{item.title}</div>
+                <div data-content>
+                  {item.list?.map((info, i) => {
+                    const isTopFive = i < 5;
+                    const getMarginStyle = () => {
+                      if (i === 4) {
+                        return {
+                          marginBottom: 4,
+                        };
+                      }
+                    };
+                    return (
+                      <Fragment key={info.label + info.children}>
+                        {index === 0 ? (
+                          <Mark style={getMarginStyle()}>
+                            {isTopFive ? '❤️' : '💪'}
+                          </Mark>
+                        ) : (
+                          <InfoDecoration
+                            style={{
+                              backgroundColor: isTopFive
+                                ? 'rgba(250,107,105,0.1)'
+                                : 'rgba(177,185,199,0.2)',
+                              ...getMarginStyle(),
+                            }}
+                          >
+                            <div data-label>
+                              <HoverView content={info.label} />
+                            </div>
+                            <span>{info.value}</span>
+                          </InfoDecoration>
+                        )}
+                      </Fragment>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </Wrapper>
+        );
+      }}
+    </RequestWrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: grid;
+  grid: auto-flow / 36px repeat(4, 1fr);
+  gap: 8px;
+  overflow: auto;
+
+  [data-title] {
+    font-weight: 500;
+    font-size: 12px;
+    color: #394252;
+    line-height: 1;
+    margin-bottom: 16px;
+    display: grid;
+    place-items: center;
+  }
+
+  [data-content] {
+    display: grid;
+    grid: auto-flow 24px / 1fr;
+    gap: 12px;
+  }
+`;
+
+const Mark = styled.div`
+  display: grid;
+  place-items: center;
+`;
+
+const InfoDecoration = styled(CnBox).attrs({
+  direction: 'row',
+  justify: 'space-between',
+  align: 'center',
+})`
+  border-radius: 500px;
+  font-size: 12px;
+  color: #272f3d;
+  padding: 0 10px;
+
+  [data-label] {
+    width: 80px;
+  }
+`;

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

@@ -0,0 +1,298 @@
+import $i18n from 'panda-i18n';
+import { IndicatorService } from 'src/services/IndicatorService';
+import { IIndicatorCardConfig } from '@/types';
+import { IndicatorArea } from './components/IndicatorArea';
+import { RequestWrapper } from '../win-wrappers/request-wrapper';
+import { CardTitleWrapper, CardWrapper } from '../win-wrappers/card-wrapper';
+import { WinCardChartType } from 'src/types/enum';
+import { INDICATOR_CONFIG_BASE_URL } from '../../utils/const';
+import { MatterContent } from './components/MatterContent';
+import { Indicator } from './components/Indicator';
+import { ChartContent } from './components/ChartContent';
+import { CnBox, CnDropdown, CnMenu, CnMenuItem, Icon } from '@cainiaofe/cn-ui';
+import {
+  IndicatorSelectDecoration,
+  SelectDecoration,
+} from './components/SelectDecoration';
+import {
+  checkEntityArr,
+  getHandleOpenLink,
+  getListLabel,
+  unitList,
+} from 'src/utils';
+import { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
+import { HoverView } from '../hover-view';
+import { useCardOptionList } from 'src/hooks/useCardOptionList';
+import { VisionUserConfigContext } from '../VisionUserConfigContext';
+import { WinChartType } from '../win-chart';
+import { WinRankContent } from './components/WinRankContent';
+import { useHasIntersected } from '@/hooks/useHasIntersected';
+
+interface IProps {
+  id: number;
+  config?: IIndicatorCardConfig;
+  style?: CSSProperties;
+}
+
+export const WinCard = ({ id, config, style }: IProps) => {
+  if (config) {
+    return <ShowCard configData={config} style={style} />;
+  }
+
+  return (
+    <RequestWrapper
+      requestData={{ url: `${INDICATOR_CONFIG_BASE_URL}?id=${id}` }}
+      service={IndicatorService.getConfigInfo}
+      style={{
+        width: '100%',
+        height: '100%',
+        ...style,
+      }}
+    >
+      {(configData) => {
+        return (
+          <ShowCard
+            configData={configData}
+            style={{ height: configData.colHeight * 128 }}
+          />
+        );
+      }}
+    </RequestWrapper>
+  );
+};
+
+const ShowCard = ({
+  configData,
+  style,
+}: {
+  configData: IIndicatorCardConfig;
+  style?: CSSProperties;
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const hasIntersected = useHasIntersected(wrapperRef);
+  const orgLevelList = useCardOptionList(
+    hasIntersected && 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 jumpUrl = configData.detailUrl;
+  const menuItems = [
+    ...(jumpUrl
+      ? [
+          <CnMenuItem key="jump" onClick={getHandleOpenLink(jumpUrl)}>
+            {$i18n.get({ id: 'ViewDetails', dm: '查看详情' })}
+          </CnMenuItem>,
+        ]
+      : []),
+  ];
+
+  const visionUserConfig = useContext(VisionUserConfigContext);
+  const hasInitOrgLevelRef = useRef(false);
+
+  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 (
+    <CardWrapper ref={wrapperRef} style={style}>
+      {isCommonTitle && (
+        <CnBox direction="row" justify="space-between" style={{ height: 20 }}>
+          <CardTitleWrapper
+            data-card-id={configData.id}
+            style={{
+              maxWidth: isSingleIndicator || !hasOrgLevel ? '80%' : '45%',
+              position: 'relative',
+              ...([
+                WinCardChartType.INDICATOR,
+                WinCardChartType.INDICATOR_AREA,
+              ].includes(configData.chartType) && {
+                fontSize: '12px',
+                fontWeight: 'normal',
+              }),
+            }}
+          >
+            <HoverView content={configData.name} />
+          </CardTitleWrapper>
+          <CnBox direction="row" align="center">
+            {hasOrgLevel && !isSingleIndicator && (
+              <SelectDecoration
+                value={curOrgLevelValue}
+                dataSource={orgLevelList}
+                onChange={setCurOrgLevelValue}
+              />
+            )}
+
+            {checkEntityArr(menuItems) && (
+              <div
+                style={{ transform: 'translate(8px, -4px) rotate(0.25turn)' }}
+              >
+                <CnDropdown
+                  trigger={
+                    <Icon type="ellipsis" style={{ cursor: 'pointer' }} />
+                  }
+                >
+                  <CnMenu style={{ width: 15 }}>{menuItems}</CnMenu>
+                </CnDropdown>
+              </div>
+            )}
+          </CnBox>
+        </CnBox>
+      )}
+
+      {getShowContent({
+        configData,
+        hasOrgLevel,
+        orgLevelVal: curOrgLevelValue,
+        unit,
+      })}
+      {isSingleIndicator && (
+        <CnBox spacing={8}>
+          {hasOrgLevel && (
+            <IndicatorSelectDecoration
+              value={curOrgLevelValue}
+              dataSource={orgLevelList}
+              onChange={setCurOrgLevelValue}
+            />
+          )}
+        </CnBox>
+      )}
+    </CardWrapper>
+  );
+};
+
+const getShowContent = ({
+  configData,
+  hasOrgLevel,
+  orgLevelVal,
+  unit,
+}: {
+  configData: IIndicatorCardConfig;
+  orgLevelVal?: string;
+  unit?: string;
+  hasOrgLevel: boolean;
+  color?: string[];
+}) => {
+  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.CYCLE_CHART:
+      return <ChartContent winChartType={WinChartType.CYCLE} {...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.CUSTOM_CARD:
+      return getCustomCardContent(configData.name);
+
+    default:
+      return undefined;
+  }
+};
+
+const getCustomCardContent = (name: string) => {
+  switch (name) {
+    case 'WIN排行榜':
+      return <WinRankContent />;
+
+    case '工作台待办':
+      return <MatterContent />;
+
+    default:
+      return (
+        <div>
+          {$i18n.get({
+            id: 'TheCustomSliceWasNotFoundPleaseC_1572163781',
+            dm: '未找到该自定义该片，请检查名称是否正确',
+          })}
+        </div>
+      );
+  }
+};

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

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

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

@@ -0,0 +1,11 @@
+import $i18n from 'panda-i18n';
+
+export const getExtraLabel = (subTitle?: number) => {
+  switch (subTitle) {
+    case 1:
+      return $i18n.get({ id: 'TERM.GoalGoals', dm: '目标' });
+
+    default:
+      return undefined;
+  }
+};

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

@@ -0,0 +1,47 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { INDICATOR_DATA_BASE_URL, handleAddQuery } from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { WinChart, WinChartType } from 'src/components/win-chart';
+
+interface IProps extends IContentProps {
+  winChartType: WinChartType;
+  reserveValueWithLabelType?: boolean;
+}
+
+export const ChartContent = ({
+  configData,
+  orgLevelVal,
+  winChartType,
+  reserveValueWithLabelType,
+}: IProps) => {
+  return (
+    <RequestWrapper
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+    >
+      {(data) => {
+        return (
+          <WinChart
+            sort={configData.commonConfig.sort}
+            yStart={configData.commonConfig.yStart}
+            color={configData.commonConfig.color}
+            xAxisLabelLength={configData.commonConfig.xAxisLabelLength}
+            xAxisLabelRotate={configData.commonConfig.xAxisLabelRotate}
+            reserveValueWithLabelType={reserveValueWithLabelType}
+            data={data.list0}
+            extraData={data.list1}
+            chartType={winChartType}
+            style={{ height: 'calc(100% - 0.4rem)' }}
+          />
+        );
+      }}
+    </RequestWrapper>
+  );
+};

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

@@ -0,0 +1,61 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import {
+  arrayDeduplication,
+  getListLabel,
+  handleAddQuery,
+  unitList,
+} from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { INDICATOR_DATA_BASE_URL } from '../../../utils/const';
+import { WinChart, WinChartType } from 'src/components/win-chart';
+import { UnitWrapper } from 'src/components/win-wrappers/card-wrapper';
+
+export const DualLineBar = ({ configData, orgLevelVal }: IContentProps) => {
+  const units =
+    arrayDeduplication(configData.indicatorConfig.map((item) => item.unit)) ??
+    [];
+  const unit0 = getListLabel(unitList, units[0]);
+  const unit1 = getListLabel(unitList, units[1]);
+
+  return (
+    <RequestWrapper
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+    >
+      {(data) => {
+        return (
+          <div
+            style={{
+              height: '100%',
+              position: 'relative',
+            }}
+          >
+            <WinChart
+              chartType={WinChartType.DUAL_LINE_BAR}
+              data={data.list0 ?? []}
+              extraData={data.list1 ?? []}
+            />
+            {/* {!!unit0 && (
+              <UnitWrapper
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  bottom: 14,
+                }}
+              >
+                ({unit0}, {unit1})
+              </UnitWrapper>
+            )} */}
+          </div>
+        );
+      }}
+    </RequestWrapper>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { handleAddQuery, INDICATOR_DATA_BASE_URL } from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { getExtraLabel } from '../utils/tool';
+import { IndicatorInfo } from './IndicatorInfo';
+
+export const Indicator = ({ configData, unit, orgLevelVal }: IContentProps) => {
+  return (
+    <RequestWrapper
+      errorBoxHeight={50}
+      noEmptyBox
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+      style={{
+        height: 'auto',
+      }}
+    >
+      {(data) => {
+        const curConfig = configData.indicatorConfig[0];
+        const subTitle = curConfig.extra?.subTitle;
+
+        return (
+          <IndicatorInfo
+            jumpUrl={`/#/h5/indicator-details?id=${curConfig.id}`}
+            label={configData.name}
+            unit={unit}
+            value={data.indicator?.value}
+            extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
+            extraValue={data.indicator?.expected}
+          />
+        );
+      }}
+    </RequestWrapper>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import {
+  getListLabel,
+  handleAddQuery,
+  handleNumberShowStr,
+  unitList,
+} from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { INDICATOR_DATA_BASE_URL } from '../../../utils/const';
+import { WinChart, WinChartType } from 'src/components/win-chart';
+import { getExtraLabel } from '../utils/tool';
+import { IndicatorInfo } from './IndicatorInfo';
+
+export const IndicatorArea = ({ configData, orgLevelVal }: IContentProps) => {
+  return (
+    <RequestWrapper
+      errorBoxHeight={50}
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+    >
+      {(data) => {
+        const curConfig = configData.indicatorConfig[0];
+        const subTitle = curConfig.extra?.subTitle;
+
+        return (
+          <div
+            style={{
+              display: 'grid',
+              grid: 'auto-flow / 4fr 6fr',
+              gap: '0.24rem',
+              transform: 'translateY(0.08rem)',
+            }}
+          >
+            <IndicatorInfo
+              jumpUrl={`/#/h5/indicator-details?id=${curConfig.id}`}
+              label={configData.name}
+              unit={getListLabel(unitList, configData.indicatorConfig[0]?.unit)}
+              value={handleNumberShowStr(data.indicator?.value)}
+              extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
+              extraValue={data.indicator?.expected}
+              style={{
+                transform: 'translateY(0.12rem)',
+              }}
+            />
+            <WinChart
+              color={configData.commonConfig.color}
+              data={data.list0 ?? []}
+              chartType={WinChartType.MINI_AREA}
+              style={{
+                height: '1.6rem',
+              }}
+            />
+          </div>
+        );
+      }}
+    </RequestWrapper>
+  );
+};