DataSoli在线文档

# $

DataSoli中任何可编辑JS脚本的地方，都能够使用$来使用JQuery的相关功能。

JQuery版本

JQuery版本号：3.4.1

JQuery语法参考：点击链接 (opens new window)

# Ajax同步请求

$.ajax({
  url: "",
  method: 'GET',
  async: false,
  success: (result) => {
    console.log(result)
  },
  error: (error) => {
    console.error(error)
  }

# EventBus

# EventBus.send

  • 参数：

{string} eventName: 事件名称

{any} payload：载荷（携带参数）

返回值：无

  • 示例：
EventBus.send("eventName", {value: "hello world"})

# EventBus.receive

  • 参数：
{string | Array<string>} eventName: 事件名称

{Function} callBack：回调函数

返回值：无

  • 示例：
// 监听单个事件
EventBus.receive("eventName", (params)=>{
  console.log(params)
})

// 监听多个事件
EventBus.receive(["eventName1","eventName2"], (params)=>{
  console.log(params)
})

# Echarts

全局 echarts 对象。

echarts版本

echarts版本号：5.2.0

官方语法参考：点击链接 (opens new window)

注意

官方的全局echarts对象使用的是echarts，而在DataSoli中，使用的是Echarts，注意首字母大写！

对于Echarts的版本更新，我们比较谨慎，只有确保升级之后，对现有组件没有任何影响的情况下，我们才会进行版本的升级。

# PnUtil

DataSoli提供了一系列的工具函数，这些函数均封装在PnUtil类中，这些函数大部分全局可用，但部分函数在页面的【页面全局JS脚本】中是无法使用的，那些无法使用的我们会在函数说明中标注。

# PnUtil.uuid

生成一个UUID字符串

  • 参数：无

返回值：UUID字符串

  • 示例：
PnUtil.uuid()

# PnUtil.getTimestamp

获取当前时间戳

  • 参数：无

返回值：时间戳

  • 示例：
PnUtil.getTimestamp()

# PnUtil.getRootPath

获取项目工程根路径

  • 参数：无

返回值：项目工程根路径字符串

  • 用法：

例如当前DataSoli系统部署的项目工程根目录为http://DataSoli.cn/DataSoli，那么此函数返回的值就是这个值

  • 示例：
PnUtil.getRootPath()
// => http://DataSoli.cn/DataSoli

跳转链接

  • 参数：

{string} href：跳转链接

{string} target：在何处打开链接，只有两个值 => _self：当前页打开，_blank：新窗口打开

返回值：无

  • 示例：
PnUtil.jumpLink("http://DataSoli.cn", "_blank")

# PnUtil.openIframeModal

注意

此函数在页面全局JS脚本中不可用

打开一个模态窗用于显示一个IFrame

  • 参数：

{string} href：IFrame链接

{string} width：模态窗宽度 => 可选值："100%" 或 "像素值px"

{string} height：模态窗高度 => 可选值："100%" 或 "像素值px"

{string} scrolling：IFrame的scrolling属性，默认值："auto"

返回值：无

  • 示例：
PnUtil.openIframeModal("http://DataSoli.cn", "100%", "100%", "auto")

# PnUtil.isMac

判断是否为Mac系统

  • 参数：无

返回值：boolean

  • 示例：
PnUtil.isMac()

# PnUtil.isWindows

判断是否为Windows系统

  • 参数：无

返回值：boolean

  • 示例：
PnUtil.isWindows()

# PnUtil.deepClone

深拷贝对象

  • 参数：

{Object} obj：被深拷贝的JS对象

返回值：Object

  • 示例：
PnUtil.deepClone({name: "zhangsan", age: 30, sex: "男"})
// => {name: "zhangsan", age: 30, sex: "男"}

# PnUtil.deepMerge

深合并对象，将两个对象进行深度合并

  • 参数：

{Object} obj1：对象1

{Object} obj2：对象2

返回值：Object

  • 示例：
PnUtil.deepMerge({name: "zhangsan", age: 30, sex: "男"}, {address: "广西南宁市..."})
// => {name: "zhangsan", age: 30, sex: "男", address: "广西南宁市..."}

# PnUtil.addUrlParams

动态添加URL参数

  • 参数：

{string} key：键

{string} value：值

返回值：无

  • 用法： 使用此函数可以在当前页面的URL地址中动态添加一个参数
  • 示例：
PnUtil.addUrlParams("str", "hello")

# PnUtil.deleteUrlParams

动态删除URL参数

  • 参数：

{string} key：键

返回值：无

  • 用法： 使用此函数可以在当前页面的URL地址中动态删除一个参数
  • 示例：
PnUtil.deleteUrlParams("str")

# PnUtil.getUrlParam

从URL中获取参数值

  • 参数：

{string} key：键

返回值：any 参数值

  • 示例：
PnUtil.getUrlParam("str")

# PnUtil.getBrowser

获取浏览器内核与版本号

  • 参数：无

返回值：Object

  • 示例：
PnUtil.getBrowser()
// => {browser: 'chrome', version: '99.0.4844.84'}

# PnUtil.cutString

删减字符串，结尾使用...替代

  • 参数：

{string} str：被删减字符串

{number} threshold：阈值：当字符串长度超过这个阈值时，后面的字符将被使用...替代

返回值：string

  • 示例：
PnUtil.cutString("DataSoli数据可视化开发平台", 7)
// => DataSoli...

# PnUtil.copyToClipboard

复制文本至操作系统剪切板

  • 参数：

{string} cont：被复制的文本

返回值：无

  • 示例：
PnUtil.copyToClipboard("DataSoli数据可视化开发平台")

# PnUtil.getRandomNum

获取范围内随机数

  • 参数：

{number} start：起始值

{number} end：结束值

{number} fixed：保留小数位数

返回值：随机获取的值

  • 示例：
PnUtil.getRandomNum(1, 10, 0)

# PnUtil.showMaskLayer

显示遮罩层（遮罩层基于IView的Spin组件实现）

  • 参数：

{boolean} state：状态，标识显示还是隐藏

返回值：无

  • 示例：
// 显示
PnUtil.showMaskLayer(true)

// 隐藏
PnUtil.showMaskLayer(false)

# PnUtil.isDesignerPage

获取判断当前页面是否是设计器页面

  • 参数：无

返回值：boolean

  • 用法： 此函数内部实现的逻辑是判断当前页面的URL地址中是否存在/designer字符串，如果存在，则证明是设计器页面。
  • 示例：
PnUtil.isDesignerPage()

# PnUtil.manualLaunchInteractionStream

警告

此函数在页面全局JS脚本中不可用

手动发起一次内置交互流

  • 参数：

{string} bindingVariateName：发起的交互变量

{string} value：发送值

返回值：无

  • 示例：
PnUtil.manualLaunchInteractionStream("str", "hello")

# PnUtil.multiManualLaunchInteractionStream

注意

此函数在页面全局JS脚本中不可用

手动发起一组内置交互流

  • 参数：

{Array} interactionStreams：交互流信息数组，数组项：{bindingVariateName: '', value: ''}

返回值：无

  • 示例：
PnUtil.multiManualLaunchInteractionStream(
  [
    {bindingVariateName: 'str', value: 'hello'}, 
    {bindingVariateName: 'str2', value: 'hello2'}
  ]
)

# PnApi

# PnApi.httpQuery

客户端HTTP请求（异步请求）

  • 参数：

{string} method：请求方式 => GET、POST，默认值："GET"

{string} apiPath：请求地址

{object} headers：请求头 => 默认值：{}

{object} postData：POST请求提交数据 => 默认值：{}

返回值：Promise

  • 示例：
PnApi.httpQuery("GET", "api", {}, {}).then((result) => {
  console.log(result)
})

# PnApi.HttpProxyApi.httpQuery

服务器代理HTTP请求（异步请求）

  • 参数：

{string} method：请求方式 => GET、POST，默认值："GET"

{string} apiPath：请求地址

{object} headers：请求头 => 默认值：{}

{object} postData：POST请求提交数据 => 默认值：{}

返回值：Promise

  • 示例：
PnApi.HttpProxyApi.httpQuery("GET", "api", {}, {}).then((result) => {
  console.log(result)
})

# PnApi.HttpProxyApi.httpQuerySync

服务器代理HTTP请求（同步请求）

  • 参数：

{string} method：请求方式 => GET、POST，默认值："GET"

{string} apiPath：请求地址

{object} headers：请求头 => 默认值：{}

{object} postData：POST请求提交数据 => 默认值：{}

返回值：Promise

  • 示例：
PnApi.HttpProxyApi.httpQuerySync("GET", "api", {}, {}).then((result) => {
  console.log(result)
})

注意

BASE_PATH

此全局变量存储的是项目工程根路径

例如当前DataSoli部署的地址为http://DataSoli.cn/DataSoli，那么BASE_PATH存储的就是这个地址。

# this

当我们在组件的【初始化运行脚本】中或部分可交互组件的交互事件触发执行脚本中，可通过this获取到当前组件的VM实例对象。

注意

部分组件的事件触发执行脚本中会特别注明使用_this来引用VM实例。

# this.redrawComp

重绘组件，一般当我们修改了组件数据源相关配置属性的之后，要调用此函数来对组件进行重绘。

  • 参数：无

返回值：无

# this.findCompVmById

根据组件ID获取组件的VM实例对象，使用此函数，可以在当前组件的动态脚本中获取同页面下的其他组件的VM实例对象。

  • 参数：

{string} componentId：组件ID

返回值：组件VM实例对象

# this.component

存储组件的相关配置信息，包括ID、组件名称、组件版本、配置属性，标准的this.component数据对象如下所示：

{
  "id": "",
  "name": "",
  "version": "",
  "compConfigData": {
    ...
  }
}

其中compConfigData中存储的就是组件的所有可配置属性，一般在动态脚本中，我们可以通过修改compConfigData下的各项属性来动态改变组件的呈现状态。

不同组件所拥有的配置属性各不相同，我们无法在文档中将所有组件拥有的配置属性都一一列出说明，如需要查看组件的所有配置属性，我们可以通过在组件的配置表单中点击【查看组件配置源数据】来了解当前组件具体都有哪些配置属性。

API

以下仅列出一些大部分组件都拥有的用于配置数据源相关功能的配置属性，因为这些属性是我们在实现一些组件之间数据交互效果时会经常用到的。

注意

以下列出的所有配置属性，均基于this.component.compConfigData下。

# ds_type

this.component.compConfigData.ds_type

存储组件使用的是何种数据源类型，有如下几种类型：

  • static：静态数据源
  • api：API数据源
  • database：数据库数据源
  • nwebsocket：WebSocket数据源
  • nshareDatasource：共享数据源
  • csv：CSV数据源

# ds_apiPath

this.component.compConfigData.ds_apiPath

存储组件API数据源的API接口地址，当ds_type为api时使用到。

# ds_apiHeaders

this.component.compConfigData.ds_apiHeaders

存储组件API数据源的请求头数据，当ds_type为api时使用到。

# ds_apiPostData

this.component.compConfigData.ds_apiPostData

存储组件API数据源的POST请求的Data数据，当ds_type为api时使用到。

# ds_wsPath

this.component.compConfigData.ds_wsPath

存储组件WebSocket数据源的请求地址，当ds_type为websocket时使用到。

# ds_sql

this.component.compConfigData.ds_sql

存储组件数据库数据源的SQL语句，当ds_type为database时使用到。

# ds_resultObj

this.component.compConfigData.ds_resultObj

存储组件绑定的数据源结果集。

最近更新日期: 10/13/2023, 1:41:14 PM

←