@cloudbase/weda-ui 0.2.13 → 0.2.16

package/src/web/components/chart/statisticsCard/index.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { CommonPropsType } from '../../../types';
+import './index.css';
+import classNames from '../../../utils/classnames';
+import { ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { IDataSource, IField } from './interface';
+import { useDeepCompareEffect, useIsMounted } from '@react-hookz/web';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+
+interface PropsType extends CommonPropsType {
+  /**
+   * 数据源
+   */
+  dataSource?: IDataSource;
+  /**
+   * 数据筛选
+   */
+  filterData?: any;
+  /**
+   * 字段
+   */
+  field?: IField;
+  /**
+   * 统计方式
+   */
+  operationType?: string;
+  /**
+   * 字段展示名称
+   */
+  label?: string;
+  /**
+   * 是否统计空值
+   */
+  isCountEmpty?: boolean;
+  /**
+   * 是否显示单位
+   */
+  isShowUnit?: boolean;
+  /**
+   * 单位
+   */
+  unit?: number;
+  /**
+   * 小数位数
+   */
+  decimalDigits?: number;
+  /**
+   * 后缀
+   */
+  suffix?: number;
+  /**
+   * app.cloud 对象依赖，默认会从 window.app 取值
+   */
+  appCloud?: { callDataSource?: any; callWedaApi?: any };
+  /**
+   * 其他属性
+   */
+  [key: string]: any;
+}
+
+const CLASS_PREFIX = 'weda-statistics-card';
+// 默认显示值
+const defaultVal = 1000;
+
+/**
+ * 修复科学计数法问题
+ * @param num 小数
+ * @returns {string}
+ */
+export function scientificToNumber(num) {
+  const str = num;
+  const reg = /^([-]?\d+\.?\d*)(e)([-|+]?\d+)$/;
+  let zero = '';
+  if (!reg.test(str)) {
+    return num;
+  }
+  const arr = reg.exec(str);
+  const len = Math.abs(+arr[3]) - 1;
+  for (let i = 0; i < len; i += 1) {
+    zero += '0';
+  }
+  if (arr[1].indexOf('-') === 0) {
+    return `-0.${zero}${arr[1].replace('-', '').replace('.', '')}`;
+  }
+  return `0.${zero}${arr[1].replace('.', '')}`;
+}
+
+/**
+ * 补齐小数位数0
+ * @param source          源字符串
+ * @param targetLength    目标长度
+ * @returns {string}
+ */
+export function padEnd(source, targetLength) {
+  targetLength = Math.floor(targetLength); //floor if number or convert non-number to 0;
+  if (source.length > targetLength) {
+    return source;
+  } else {
+    targetLength = targetLength - source.length;
+    return source + '0'.repeat(targetLength);
+  }
+}
+
+/**
+ * 修复toFixed四舍五入不准确问题
+ * @param num
+ * @param digit 小数位数
+ * @returns {string}
+ */
+export function customToFixed(num, digit = 0) {
+  const pow = Math.pow(10, digit);
+  let value = `${num}`;
+  // 如果是小数，四舍五入进行转化处理确保精度正确
+  if (!Number.isInteger(num)) {
+    if (num > 0) {
+      value = (Math.round((num + Number.EPSILON) * pow) / pow).toString();
+    } else if (num < 0) {
+      value = (Math.round((num - Number.EPSILON) * pow) / pow).toString();
+    }
+  }
+  value = scientificToNumber(value);
+  const [integer, decimal = ''] = value.split('.');
+  if (digit > 0) {
+    return `${integer}.${padEnd(decimal, digit)}`;
+  }
+  return integer;
+}
+
+/**
+ * 格式化：添加千分符，四舍五入
+ * @param val
+ * @param digits
+ */
+const formatNumber = (val, digits = 0) => {
+  return isNaN(val)
+    ? val
+    : Intl
+    ? Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 10,
+        minimumFractionDigits: digits,
+      }).format(+customToFixed(val, digits))
+    : val;
+};
+
+export default function StatisticsCard({
+  dataSource,
+  filterData,
+  field,
+  operationType,
+  label,
+  isCountEmpty,
+  isShowUnit,
+  unit,
+  decimalDigits,
+  suffix,
+  className,
+  style,
+  events,
+  id,
+  role,
+  appCloud = { callDataSource, callWedaApi },
+}: PropsType) {
+  const [val, setVal] = useState(defaultVal);
+  const isMounted = useIsMounted();
+
+  async function getSourceData(
+    dataSource,
+    filterData,
+    field,
+    operationType,
+    isCountEmpty
+  ) {
+    const where = filterData?.map
+      ? filterData.map((val) => {
+          let arrLogicData = val.logicData;
+          if (val.logicData && val.logicData.length > 0) {
+            arrLogicData = val.logicData.map((mval) => {
+              return {
+                Key: mval.key,
+                Rel: mval.rel,
+                Value: mval.value,
+                Logic: mval.logic,
+              };
+            });
+          }
+          return {
+            GroupLogic: val.groupLogic,
+            LogicData: arrLogicData,
+          };
+        })
+      : [];
+    const params = {
+      dataSourceName: dataSource?.name,
+      where,
+      value: [
+        {
+          Key: field?.name,
+          OperationType: operationType,
+          IsCountEmpty: isCountEmpty,
+        },
+      ],
+    };
+    try {
+      if (dataSource?.type === 'database') {
+        return await appCloud?.callWedaApi({
+          action: 'DescribeChartCardData',
+          data: params,
+        });
+      }
+      return await appCloud?.callDataSource({
+        dataSourceName: dataSource?.name,
+        methodName: dataSource?.methodName,
+      });
+    } catch {
+      return [];
+    }
+  }
+
+  const initCard = async () => {
+    // 内部数据源需要字段和统计方式，外部数据源不需要
+    if (
+      (dataSource?.type === 'database' && field && operationType) ||
+      (dataSource && dataSource?.type !== 'database')
+    ) {
+      let data = await getSourceData(
+        dataSource,
+        filterData,
+        field,
+        operationType,
+        isCountEmpty
+      );
+      // 自定义连接器 返回处理
+      if (dataSource?.type !== 'database' && data?.result) {
+        data = data?.result;
+      }
+      if (data?.length) {
+        const val = isNaN(data[0]?.Value) ? 0 : data[0]?.Value;
+        isMounted && setVal(val);
+      } else {
+        // 返回数据为空 使用 0
+        isMounted && setVal(0);
+      }
+    } else {
+      // 没有配置数据使用默认数据
+      isMounted && setVal(defaultVal);
+    }
+  };
+
+  useDeepCompareEffect(() => {
+    initCard();
+  }, [dataSource, filterData, field, operationType, isCountEmpty]);
+
+  const platform = usePlatform();
+  const cls = classNames({
+    'weda-ui': true,
+    [CLASS_PREFIX]: true,
+    [className]: className,
+    [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+    [`${CLASS_PREFIX}-pc`]: platform !== 'h5',
+  });
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div
+        id={id}
+        role={role}
+        className={cls}
+        style={style}
+        onClick={(e) => events.tap({}, { originEvent: e })}
+      >
+        <div className={`${CLASS_PREFIX}__wrapper`}>
+          <div className={`${CLASS_PREFIX}__title`}>{label}</div>
+          <div className={`${CLASS_PREFIX}__detail`}>
+            <div className={`${CLASS_PREFIX}__count`}>
+              {isShowUnit ? formatNumber(val / unit, decimalDigits) : val}
+              {isShowUnit && (
+                <label className={`${CLASS_PREFIX}__unit`}>{suffix}</label>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}

package/src/web/components/chart/statisticsCard/interface.ts

@@ -0,0 +1,14 @@
+export interface IDataSource {
+  name: string; // 数据源名
+  type: string; // 数据源类型
+  subType: string; // 数据源子类型
+  provider?: string; // 内置连接器类型
+  methodName: string; // 数据源方法名
+}
+
+export interface IField {
+  format: string;
+  type: string;
+  title: string;
+  name: string;
+}

package/src/web/components/dataView/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IDataView } from './interface';
+import ListView from '../listView';
+
+/**
+ * 数据容器-列表视图
+ */
+export default function DataView(props: IDataView) {
+  return (
+    <ListView
+      {...props}
+      orderBy={undefined}
+      orderType={undefined}
+      template="none"
+      pageSize={1}
+      pagination="none"
+      beforeDataChange={(values) => values?.[0]}
+    />
+  );
+}

package/src/web/components/dataView/interface.ts

@@ -0,0 +1,6 @@
+import { IDataContainer } from '../listView/interface';
+
+/**
+ * 数据容器-数据视图
+ */
+export interface IDataView extends IDataContainer {}

package/src/web/components/form/input/index.css

@@ -1,4 +1,41 @@
-.wedatea2td-input {
-    background-color: transparent;
-    border: none;
-}
+/*  ios safari 特别是小屏幕 iphone SE 之流
+    weui自带cell的padding会把input压到很小，
+    容易点不到，需要特殊处理
+    START
+ */
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui.weda-input input.weui-input {
+    padding: 28px 16px;
+}
+
+.weda-ui.weda-input .weui-cell.weda-formcells__label {
+    padding: 16px;
+}
+.weda-ui.weda-input .weda-formcells__label.weui-cell label {
+    padding: 0;
+}
+.weda-ui.weda-input .weui-cell {
+    padding: 0;
+}
+
+.weda-ui.weda-input .weui-btn_input-clear {
+    padding-right: 16px;
+}
+
+/**
+ * END
+ */
+
+/*
+    背景颜色设置问题
+    START
+*/
+.weda-ui .wedatea2td-input {
+    background: inherit;
+}
+/**
+ * END
+ */

package/src/web/components/form/input/index.tsx

@@ -94,6 +94,7 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        role="input"
       />
       {clearable &&
         <button

package/src/web/components/form/location/common/mapChoose.css

@@ -0,0 +1,178 @@
+/* mapChoose组件 */
+.weda-ui_map-choose {
+  width: 100%;
+  height: 100%;
+}
+.map-choose-pc {
+  display: flex;
+}
+.map-choose-pc-left {
+  width: 45%;
+  position: relative;
+}
+.map-choose-pc-right {
+  width: 55%;
+}
+.map-choose-header {
+  width: 100%;
+  padding: 8px 15px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+}
+.map-choose-header_focus {
+  padding-right: 60px;
+}
+.map-choose-header_focus .map-choose-header_search_cancel {
+  display: block;
+}
+.map-choose-header_focus .map-choose-header_search_place {
+  left: 10px;
+  transform: translate(0, 0);
+}
+.map-choose-header_search {
+  height: 30px;
+  background-color: #ebebeb;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: #b4b4b4;
+  font-size: 15px;
+  line-height: 31px;
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+}
+.map-choose-header_search_place {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  transform: translate(-50%, 0);
+}
+.map-choose-header_search_cancel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 55px;
+  height: 46px;
+  line-height: 46px;
+  text-align: center;
+  font-size: 16px;
+  color: #0079ff;
+  background-color: #fff;
+  cursor: pointer;
+  display: none;
+}
+.map-choose-header_search img {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+}
+.map-choose-header_search input {
+  display: block;
+  width: 100%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border: 0;
+  font-size: 14px;
+  line-height: 18px;
+  background: 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+.map-choose-con {
+  width: 100%;
+  height: calc(100% - 50px);
+  position: relative;
+}
+.map-choose-warp,
+.map-choose-explore {
+  width: 100%;
+  height: 100%;
+}
+.map-choose-explore-pc {
+  height: calc(100% - 47px);
+}
+.map-choose-explore {
+  display: none;
+}
+.map-choose-explore_show {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  overflow: hidden;
+}
+.map-choose-explore_show-pc {
+  top: 47px;
+}
+
+.map-choose-warp_sugges {
+  height: 55%;
+  width: 100%;
+}
+.map-choose-warp_sugges-pc {
+  height: calc(100% - 47px);
+  width: 100%;
+}
+.map-choose-warp_sugges ul,
+.map-choose-explore_show ul {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+.map-choose-warp_sugges li,
+.map-choose-explore_show li {
+  width: 100%;
+  height: 59px;
+  padding-top: 6px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+  cursor: pointer;
+  position: relative;
+}
+.map-choose-warp_sugges li span {
+  display: none;
+}
+.map-choose-warp_sugges_choosed span {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: 16px;
+  height: 16px;
+  display: block !important;
+  background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.map-choose-warp_sugges li div,
+.map-choose-explore_show li div {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 98%;
+}
+.map-choose-warp_sugges_title,
+.map-choose-explore_title {
+  font-size: 14px;
+  line-height: 27px;
+  color: #333;
+  font-weight: 400;
+  display: block;
+}
+
+.map-choose-explore_show_inSearch {
+  display: none;
+}
+.map-choose-explore_show-h5 {
+  height: auto;
+  min-height: 75vh;
+}