@cloudbase/weda-ui 0.2.15 → 0.2.16

package/src/mp/components/chart/statisticsCard/index.js

@@ -0,0 +1,226 @@
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+
+const DEFAULT_VAL = 1000;
+
+Component({
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    dataSource: {
+      // 数据源
+      type: Object,
+    },
+    filterData: {
+      // 数据筛选
+      type: Array,
+      value: [],
+    },
+    field: {
+      // 字段选择
+      type: Object,
+    },
+    operationType: {
+      // 统计方式
+      type: String,
+    },
+    label: {
+      // 字段展示名称
+      type: String,
+      value: '今日活跃用户数',
+    },
+    isCountEmpty: {
+      // 是否统计空值
+      type: Boolean,
+      value: false,
+    },
+    isShowUnit: {
+      // 是否显示单位
+      type: Boolean,
+      value: true,
+    },
+    unit: {
+      // 单位
+      type: Number,
+      value: 1,
+    },
+    decimalDigits: {
+      // 小数位数
+      type: Number,
+      value: 0,
+    },
+    suffix: {
+      // 后缀
+      type: String,
+      value: '个',
+    },
+  },
+  data: {
+    count: DEFAULT_VAL,
+  },
+  methods: {
+    scientificToNumber: function (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('.', '')}`;
+    },
+    padEnd: function (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);
+      }
+    },
+    customToFixed: function (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 = this.scientificToNumber(value);
+      const [integer, decimal = ''] = value.split('.');
+      if (digit > 0) {
+        return `${integer}.${this.padEnd(decimal, digit)}`;
+      }
+      return integer;
+    },
+    formatNumber: function (val, digits = 0) {
+      return isNaN(val)
+        ? val
+        : Intl
+        ? Intl.NumberFormat('en-US', {
+            maximumFractionDigits: 10,
+            minimumFractionDigits: digits,
+          }).format(this.customToFixed(val, digits))
+        : val;
+    },
+    getSourceData: async function (
+      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 callWedaApi({
+            action: 'DescribeChartCardData',
+            data: params,
+          });
+        }
+        return await callDataSource({
+          dataSourceName: dataSource?.name,
+          methodName: dataSource?.methodName,
+        });
+      } catch {
+        return [];
+      }
+    },
+    _fetchData: async function () {
+      if (
+        (this.properties.dataSource?.type === 'database' &&
+          this.properties.field &&
+          this.properties.operationType) ||
+        (this.properties.dataSource &&
+          this.properties.dataSource?.type !== 'database')
+      ) {
+        let data = await this.getSourceData(
+          this.properties.dataSource,
+          this.properties.filterData,
+          this.properties.field,
+          this.properties.operationType,
+          this.properties.isCountEmpty
+        );
+        // 自定义连接器 返回处理
+        if (this.properties.dataSource?.type !== 'database' && data?.result) {
+          data = data?.result;
+        }
+        if (data?.length) {
+          const val = isNaN(data[0]?.Value) ? 0 : data[0]?.Value;
+          this.setData({
+            count: this.properties.isShowUnit
+              ? this.formatNumber(
+                  val / this.properties.unit,
+                  this.properties.decimalDigits
+                )
+              : val,
+          });
+        } else {
+          // 返回数据为空 使用 0
+          this.setData({
+            count: this.formatNumber(0, this.properties.decimalDigits),
+          });
+        }
+      } else {
+        // 没有配置数据使用默认数据
+        this.setData({
+          count: this.setData({
+            count: this.formatNumber(
+              DEFAULT_VAL,
+              this.properties.decimalDigits
+            ),
+          }),
+        });
+      }
+    },
+  },
+  lifetimes: {
+    attached() {
+      this._fetchData();
+    },
+  },
+});

package/src/mp/components/chart/statisticsCard/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/src/mp/components/chart/statisticsCard/index.wxml

@@ -0,0 +1,9 @@
+<view class="weda-statistics-card weda-ui {{className}}" style="{{style}}" bind:tap="tap">
+  <view class="weda-statistics-card__wrapper">
+    <view class="weda-statistics-card__title">{{label}}</view>
+    <view class="weda-statistics-card__detail">
+      <text class="weda-statistics-card__count">{{count}}</text>
+      <text class="weda-statistics-card__unit">{{suffix}}</text>
+    </view>
+  </view>
+</view>

package/src/mp/components/chart/statisticsCard/index.wxss

@@ -0,0 +1,45 @@
+.weda-statistics-card {
+  background: #ffffff;
+  border: 1px solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-height: 140px;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 40px 24px;
+  box-sizing: border-box;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 4px;
+  font-size: 28px;
+  line-height: 34px;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 28px;
+  line-height: 34px;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 4px;
+  vertical-align: middle;
+}

package/src/mp/components/dataView/index.js

@@ -0,0 +1,34 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    datasource: {
+      type: Object,
+      value: {},
+    },
+    where: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    innerBeforeDataChange: function (values) {
+      return values?.[0];
+    },
+  },
+  methods: {
+    handleEvent: function (params) {
+      const { type, detail } = params || {};
+      type && this.triggerEvent(type, detail);
+    },
+  },
+});

package/src/mp/components/dataView/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "list-view": "../listView"
+  }
+}

package/src/mp/components/dataView/index.wxml

@@ -0,0 +1,15 @@
+<list-view 
+  className="weda-data-view__containor {{className}}"
+  style="{{style}}"
+  datasource="{{datasource}}"
+  where="{{where}}"
+  pageSize="{{1}}"
+  pagination="none"
+  beforeDataChange="{{innerBeforeDataChange}}"
+  bindonDataChange="handleEvent"
+  bindqueryFail="handleEvent"
+  bindqueryEmpty="handleEvent"
+  bindquerySuccess="handleEvent"
+>
+  <slot></slot>
+</list-view>

package/src/mp/components/form/location/components/mapChoose/index.js

@@ -0,0 +1,201 @@
+import debounce from '../../../../../utils/debounce';
+import dr_square_point from '../../../../../utils/dr_square_point';
+let QQMapWX = require('../../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
+let qqmapsdk;
+
+// components/mapChoose/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    location: {
+      type: Object,
+      value: {
+        latitude: 39.984104,
+        longitude: 116.307503,
+        poiname: '',
+      },
+    },
+    APIKEY: {
+      type: String,
+      value: '',
+    },
+    range: {
+      type: Number,
+      value: 1000,
+    },
+  },
+
+  lifetimes: {
+    attached: function () {
+      let location = this.properties.location;
+      let marker = {
+        id: 'id-marker',
+        latitude: location.latitude,
+        longitude: location.longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        markers: [marker],
+        originMarker: {
+          ...marker,
+          id: 'origin',
+        },
+        choosedLocation: location,
+      });
+      // 实例化API核心类
+      qqmapsdk = new QQMapWX({
+        key: this.properties.APIKEY,
+      });
+    },
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    searchValue: '',
+    isSearch: false,
+    exploreList: [],
+    searchList: [],
+    choosedLocation: {
+      latitude: null,
+      longitude: null,
+    },
+    originMarker: {},
+    markers: [],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    regionchange(event) {
+      let {
+        type,
+        detail: { centerLocation },
+      } = event;
+      if (type === 'begin') return;
+      let marker = {
+        id: 'id-marker',
+        latitude: centerLocation.latitude,
+        longitude: centerLocation.longitude,
+        width: 25,
+        height: 35,
+      };
+      this.setData({
+        markers: [marker, this.data.originMarker],
+      });
+      this.searchLocation('路', 20, centerLocation, this, 'exploreList');
+    },
+    comfirm(event) {
+      this.triggerEvent('setIsSelectMapVisible');
+      if (
+        this.data.choosedLocation.latitude &&
+        event.currentTarget.dataset.value
+      ) {
+        this.triggerEvent('changeLocation', this.data.choosedLocation);
+      }
+    },
+    changeInput(e) {
+      this.setData({
+        searchValue: e.detail.value,
+      });
+      if (!e.detail.value) {
+        setTimeout(() => {
+          this.setData({
+            searchList: [],
+          });
+        }, 1000);
+        return;
+      }
+      this.searchLocation(
+        e.detail.value,
+        10,
+        this.data.markers[0],
+        this,
+        'searchList'
+      );
+    },
+    focusInput() {
+      this.setData({
+        isSearch: true,
+      });
+    },
+    cancleSearch() {
+      this.setData({
+        isSearch: false,
+        searchValue: '',
+      });
+    },
+    searchLocation: debounce((value, page_size, location, _this, type) => {
+      let range = _this.properties.range / 1000;
+      let { leftBottom, rightTop } = dr_square_point(
+        location.longitude,
+        location.latitude,
+        range
+      );
+      qqmapsdk.search({
+        keyword: value,
+        page_size,
+        rectangle: `${leftBottom[0]},${leftBottom[1]},${rightTop[0]},${rightTop[1]}`,
+        success: (res) => {
+          _this.setData({
+            [type]: res.data,
+          });
+        },
+        fail: function (err) {
+          console.log('err search', err);
+          if (
+            err.message ===
+            'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化'
+          ) {
+            wx.showToast({
+              title:
+                '获取周边信息接口并发限制 高频调用请前往腾讯地图后台申请配额',
+              icon: 'none',
+              duration: 2000,
+            });
+          }
+        },
+      });
+    }, 500),
+    chooseSite(event) {
+      let { title, location, id } = event.currentTarget.dataset.location;
+      let type = event.currentTarget.dataset.type;
+      location = {
+        latitude: location.lat,
+        longitude: location.lng,
+        poiname: title,
+        id,
+      };
+      if (type === 'search') {
+        let marker = {
+          id: 'id-marker',
+          latitude: location.latitude,
+          longitude: location.longitude,
+          width: 25,
+          height: 35,
+        };
+        let originMarker = this.data.originMarker;
+        this.setData({
+          isSearch: false,
+          searchList: [],
+          searchValue: '',
+          choosedLocation: location,
+          markers: [marker, originMarker],
+        });
+        this.searchLocation('路', 20, location, this, 'exploreList');
+      } else {
+        this.setData({
+          choosedLocation: location,
+        });
+      }
+    },
+  },
+});

package/src/mp/components/form/location/components/mapChoose/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/mp/components/form/location/components/mapChoose/index.wxml

@@ -0,0 +1,42 @@
+<!--components/mapChoose/index.wxml-->
+<view class="map-choose">
+  <view class="map-choose-header">
+    <view class="map-choose-header_title">选择地理位置</view>
+    <view class="cross" bindtap="comfirm" ></view>
+  </view>
+  <view class="map-choose-body">
+    <view class="map-choose-body-saerch {{isSearch?'map-choose-header_search_input_value':''}}">
+      <view class="map-choose-header_search_input">
+        <input type="text" value="{{searchValue}}" bindinput="changeInput" bindfocus="focusInput" />
+        <view class="map-choose-header_search_place" wx:if="{{!isSearch}}">
+          <image src="https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png"></image>
+          <text>搜索地点</text>
+        </view>
+      </view>
+      <view class="map-choose-header_search_input_cancle" wx:if="{{isSearch}}" bindtap="cancleSearch">取消</view>
+    </view>
+    <view class="map-choose-search" wx:if="{{isSearch}}">
+      <view class="map-choose-explore_ul map-choose-search_ul">
+        <view class="map-choose-explore_li" wx:for="{{searchList}}" wx:key="index" data-location="{{item}}" bindtap="chooseSite" data-type="search">
+          <view class="map-choose-explore_li_con" style="font-size: 14px;">{{item.title}} </view>
+          <view class="map-choose-explore_li_con" style="color: rgb(146, 148, 150);">{{item.address}}</view>
+          <view class="map-choose-explore_li_arow" />
+        </view>
+      </view>
+    </view>
+    <view class="map-choose-explore" wx:if="{{!isSearch}}">
+      <map id="choose-map" longitude="{{choosedLocation.longitude}}" latitude="{{choosedLocation.latitude}}" scale="14" style="width: 100%; height: 200px;" bindregionchange="regionchange" markers="{{markers}}" ></map>
+      <view class="map-choose-explore_ul">
+        <view class="map-choose-explore_li {{choosedLocation.id==item.id?'map-choose-explore_li_choosed':''}} " wx:for="{{exploreList}}" wx:key="index" data-location="{{item}}" bindtap="chooseSite">
+          <view class="map-choose-explore_li_con" style="font-size: 14px;">{{item.title}} </view>
+          <view class="map-choose-explore_li_con" style="color: rgb(146, 148, 150);">{{item.address}}</view>
+          <view class="map-choose-explore_li_arow" />
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="map-choose-footer">
+    <button data-value="true" bindtap="comfirm">确认</button>
+    <button bindtap="comfirm">取消</button>
+  </view>
+</view>