qy-better-lib 0.0.1

package/src/shared/chartType.ts

@@ -0,0 +1,279 @@
+/**
+ *  图表结构
+ */
+export type TypeDesignChart = {
+  /**组件类型 */
+  type: string;
+  /**是否坐标系图表 */
+  isAxis?: boolean;
+  /**
+   * 图表ID
+   */
+  chartId?: string | number;
+  /**
+   * 自定义配置
+   */
+  __config__: ChartConfig;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 提示框
+   */
+  tooltip?: ToolTip;
+  /**
+   * 图例
+   */
+  legend?: Legend;
+  /**
+   * X轴配置
+   */
+  xAxis?: Aris;
+  /**
+   * y轴配置
+   */
+  yAxis?: Aris;
+  /**
+   * 数据
+   */
+  series: Serie[];
+
+  radar?: object;
+  /**
+   * 网格大小
+   */
+  grid?: Grid;
+
+  //批量选中
+  batchDelete?: boolean;
+  // 是否分页
+  paging?: boolean;
+  // 数据源(多图表同源)
+  tableData?: any;
+  // 列配置
+  tableColums?: any;
+};
+
+export type ChartConfig = {
+  /**
+   * 图表名称
+   */
+  label: string;
+  /**
+   * 默认图表类型
+   */
+  type: string;
+  /**
+   * 图标名称
+   */
+  icon: string;
+  /**
+   * 数据类型
+   */
+  dataType: DataSourceType[];
+
+  /**
+   * X轴数据类型
+   */
+  xAxisDataType?: string;
+  /**
+   * X轴数据绑定字段
+   */
+  xAxisDataAttr?: string;
+  /**
+   * Y轴数据类型
+   */
+  yAxisDataType?: string;
+  /**
+   * Y轴数据绑定字段
+   */
+  yAxisDataAttr?: string;
+  /**
+   * 数据源绑定字段
+   */
+  dataSourceAttr: string[];
+  /**
+   * 深色模式，rgba(16,12,42,1)
+   */
+  isDark: boolean;
+  /**
+   * 跨行
+   */
+  colSpan?: number;
+  /**
+   * 跨列
+   */
+  rowSpan?: number;
+  /**是否具有详情跳转 */
+  isDetail: false;
+  /**
+   * 数据源配置
+   */
+  dataSource?: any;
+  dataOrg: string[];
+  tableName?: string;
+  fkey?: string;
+  fTableName?: string;
+  fTableId?: string;
+  fKeyValue?: string;
+};
+
+export type ToolTip = {
+  /**
+   * 是否显示
+   */
+  show?: boolean;
+  /**
+   * 触发类型
+   */
+  trigger?: string;
+  /**
+   * 触发条件
+   */
+  triggerOn?: string;
+};
+
+export type Aris = {
+  axisLine?: any;
+  axisLabel?: any;
+  /**
+   * 是否显示
+   */
+  show?: boolean;
+  /**
+   * 坐标轴类型
+   */
+  type?: AxisType;
+  /**
+   * 坐标轴名字旋转角度
+   */
+  nameRotate?: number;
+  /**
+   * 坐标轴刻度最小值
+   */
+  min?: number;
+  /**
+   * 坐标轴刻度最大值
+   */
+  max?: number;
+
+  data?: any[];
+};
+
+export type Serie = {
+  id?: string;
+  name?: string;
+  type: string;
+  radius?: number;
+  stack?: string;
+  cursor?: string;
+  data: Data[];
+  annular?: boolean;
+  /**显示占比(饼状图) */
+  ratio?: boolean;
+};
+
+export type Data = string | number | boolean | any;
+
+export type Grid = {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  containLabel: boolean;
+};
+
+export type ChartPanel = {
+  /**
+   * 行数
+   */
+  rows?: number;
+  /**
+   * 列数
+   */
+  columns?: number;
+  /**
+   * 单元格宽
+   */
+  cellWidth?: number;
+  /**
+   * 单元格高
+   */
+  cellHeight?: number;
+  /**
+   * 单元格间距
+   */
+  gap?: number;
+
+  searchConfig?: SearchConfig[];
+};
+
+export type Legend = {
+  show: boolean;
+  position?: string;
+  data?: string[];
+};
+
+/**查询配置 */
+type SearchConfig = {
+  /**KEY */
+  key: string;
+  /**字段列表名称 */
+  fieldText: string;
+  /**字段列表  应用-模块-表-字段 */
+  fieldList: Array<string | number>;
+  /**字段属性 */
+  field?: string;
+  /**字段描述 */
+  fieldDes?: string;
+  /**搜索组件类型 */
+  fieldType?: SearchFieldType;
+  /**搜索组件查询类型 */
+  filterType?: FilterType;
+};
+/**
+ * 搜索组件类型
+ */
+enum SearchFieldType {
+  /**文本框 */
+  TEXT = 1,
+  /**下拉框 */
+  SELECT = 2,
+  /**日期 */
+  DATE = 3,
+  /**日期时间 */
+  DATETIME = 4,
+  /**时间 */
+  TIME = 5,
+}
+
+/**值判断类型 */
+enum FilterType {
+  /**等于 */
+  Equal = 1,
+  /**区间 */
+  Extent = 2,
+}
+/**
+ * 坐标轴类型
+ */
+export enum AxisType {
+  /**值坐标轴 */
+  VALUE = "value",
+  /**类目轴 */
+  CATEGORY = "category",
+  /**时间轴 */
+  TIME = "time",
+  /**对数轴 */
+  LOG = "log",
+}
+/**
+ * 数据源类型，SQL/API
+ */
+export enum DataSourceType {
+  /**SQL语句 */
+  SQL = "0",
+  /**API接口 */
+  API = "1",
+}

package/src/shared/const.ts

@@ -0,0 +1,160 @@
+export const APIEnrty = {
+  DEFAULT: import.meta.env.VITE_DEFAULT_API, // "/api"
+};
+
+declare type labelValue = {
+  /**文本字段 */
+  label: string;
+  /**
+   * 值字段
+   */
+  value: string;
+};
+
+export enum dateTimeFormat {
+  /** 日期 */
+  date = "YYYY-MM-DD",
+  /** 周 */
+  week = "gggg第ww周",
+  /** 年月 */
+  month = "YYYY-MM",
+  /** 年 */
+  year = "YYYY",
+  /** 日期时间 */
+  datetime = "YYYY-MM-DD HH:mm:ss",
+  /** 多个日期 */
+  dates = "YYYY-MM-DD",
+  /** 时间 */
+  time = "HH:mm:ss",
+}
+
+/**
+ * 单位类型
+ * @enum {number}
+ */
+export enum ResultUnit {
+  /** 天 */
+  DAY = 1,
+  /** 小时 */
+  HOUR = 2,
+  /** 分钟 */
+  MINUTE = 3,
+  /** 秒 */
+  SECOND = 4,
+}
+
+export const justifyOptions: Array<labelValue> = [
+  {
+    label: "start",
+    value: "start",
+  },
+  {
+    label: "end",
+    value: "end",
+  },
+  {
+    label: "center",
+    value: "center",
+  },
+  {
+    label: "space-around",
+    value: "space-around",
+  },
+  {
+    label: "space-between",
+    value: "space-between",
+  },
+];
+
+export const dateTypeOptions: Array<labelValue> = [
+  {
+    label: "日(date)",
+    value: "date",
+  },
+  {
+    label: "周(week)",
+    value: "week",
+  },
+  {
+    label: "月(month)",
+    value: "month",
+  },
+  {
+    label: "年(year)",
+    value: "year",
+  },
+  {
+    label: "日期时间(datetime)",
+    value: "datetime",
+  },
+  // {
+  //   label: '多个日期(dates)',
+  //   value: 'dates',
+  // },
+];
+
+export const dateRangeTypeOptions: Array<labelValue> = [
+  {
+    label: "日期范围(daterange)",
+    value: "daterange",
+  },
+  {
+    label: "月范围(monthrange)",
+    value: "monthrange",
+  },
+  {
+    label: "日期时间范围(datetimerange)",
+    value: "datetimerange",
+  },
+];
+
+export const colorFormatOptions: Array<labelValue> = [
+  {
+    label: "hex",
+    value: "hex",
+  },
+  {
+    label: "rgb",
+    value: "rgb",
+  },
+  {
+    label: "rgba",
+    value: "rgba",
+  },
+  {
+    label: "hsv",
+    value: "hsv",
+  },
+  {
+    label: "hsl",
+    value: "hsl",
+  },
+];
+
+export const AxisType: labelValue[] = [
+  {
+    label: "数值轴",
+    value: "value",
+  },
+  {
+    label: "类目轴",
+    value: "category",
+  },
+  {
+    label: "时间轴",
+    value: "time",
+  },
+  {
+    label: "对数轴",
+    value: "log",
+  },
+];
+
+export const chartType: labelValue[] = [
+  { label: "折线图", value: "line" },
+  { label: "柱状图", value: "bar" },
+  { label: "饼图", value: "pie" },
+  { label: "散点图", value: "scatter" },
+  { label: "雷达图", value: "radar" },
+  { label: "仪表盘", value: "gauge" },
+];

package/src/shared/lib.ts

@@ -0,0 +1,129 @@
+;
+(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isAndroid = win.navigator.appVersion.match(/android/gi);
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下，仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    // function refreshRem(){
+    //     var width = docEl.getBoundingClientRect().width;
+    //     if (width / dpr > 540) {
+    //         width = 540 * dpr;
+    //     }
+    //     var rem = width / 10;
+    //     docEl.style.fontSize = rem + 'px';
+    //     flexible.rem = win.rem = rem;
+    // }
+    function refreshRem() {
+        var width = docEl.getBoundingClientRect().width;
+        if (width / dpr < 540) {
+            width = 540 * dpr;
+        } else if (width / dpr > 1980) {
+            width = 1980 * dpr
+        }
+        var rem = width / 10;
+        docEl.style.fontSize = rem + 'px';
+        flexible.rem = win.rem = rem;
+    }
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function(e) {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));